Как мне вызвать функцию для каждого <li>, когда они находятся в верхней части области просмотра? - PullRequest
Новая
       40

Как мне вызвать функцию для каждого <li>, когда они находятся в верхней части области просмотра?

0 голосов
/ 28 февраля 2012

Пожалуйста, помогите.Я теряю сон из-за этого!:)

У меня есть список коротких сообщений;называйте их цитатами, если хотите.У меня есть фиксированный заголовок позиции высотой 200px с прозрачным фоном.Мне нужен заголовок, видимый для каждого поста, который просматривает пользователь (отсюда и фиксированное позиционирование), и я хотел бы, чтобы прочитанные посты исчезали (или существенно уменьшались в непрозрачности), когда они прокручивались вверх и за заголовком;инверсия "lazyload" с пэдом 200px, если хотите.Конечно, если пользователь прокручивает противоположное направление, чтобы вернуть сообщение обратно в область просмотра (и под заголовком), мне нужно, чтобы оно появилось снова.

Я довольно новичок в jQuery, поэтому, пожалуйста, потерпите меня.Я много искал помощи и подсказок, но пока не нашел решения.Ваша помощь искренне ценится!

Макет:

Тестовая страница

jQuery: 

$(document).ready(function(){

  var headerheight = $('#header').height();
  var scrollposition = $(window).scrollTop();

    $(window).scroll(function(){

        var offset = .offset();

        $('li').each(function() {

            if(scrollposition <= $(this)offset.top-headerheight){

            // 
            $(this).fadeOut(400);
            // 

            } else {

            //
            $(this).fadeIn(400);
            //

            }
        });
    });
});

Ответы [ 2 ]

0 голосов
/ 05 марта 2012

Понял. Использовал этот плагин: http://imakewebthings.github.com/jquery-waypoints/

0 голосов
/ 28 февраля 2012 
$(document).ready(function(){

    var headerheight = $('#header').height();

    $(window).scroll(function(){
        var scrollposition = $(window).scrollTop();

        $('li').each(function() {
            var obj = $('.test');

            if(scrollposition >= headerheight){

                if(obj.css('display') == 'none') {
                    $('.test').fadeIn(400);
                }

            } else {

                if(obj.css('display') == 'block') {
                    $('.test').fadeOut(400);
                }

            }
        });
    });
});

Было немало недостатков и ошибок.Но моя модификация должна сделать свое дело.Как вы, мы фиксируем позицию прокрутки только один раз, и она никогда не обновится.Что может привести к тому, что операторы всегда будут идти не так, как надо :) Это приведет к исчезновению или исчезновению класса .test, только если он еще не исчез или исчез.

Попробуйте и дайте мне знать, сработало ли это.:)

Помните, что это приведет к исчезновению класса .test, если позиция прокрутки выше или равна высоте #header -

...