当它们靠近视口顶部时，如何在每个 <li> 上调用函数？

Question

请帮忙。我为此失眠了！ :)

我有一个简短的帖子列表；如果你愿意，可以称他们为引号。我有一个 200 像素高、透明背景的固定位置标题。我需要用户滚动浏览的每个帖子的标题都可见（因此是固定位置），并且我希望阅读的帖子在向上滚动并在标题后面时消失（或显着降低不透明度）；如果您愿意，可以使用 200 像素的 pad 与“lazyload”相反。当然，如果用户滚动相反的方向以使帖子回到视口中（以及标题下方），我需要它重新出现。

我对 jQuery 还很陌生，所以请多多包涵。我已经广泛搜索了帮助和提示，但还没有修复。衷心感谢您的帮助！

样机：

Test Page

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);
            //

            }
        });
    });
});

Answer 1

$(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);
                }

            }
        });
    });
});

其中有相当多的缺陷和错误。但是我的修改应该可以解决问题。正如您一样，我们只捕获滚动位置一次，它永远不会更新。这将导致 if 语句总是以错误的方式运行 :) 如果 .test 类尚未淡入或淡出，这只会淡入或淡出。

试一试，如果有效，请告诉我:)

请记住，如果滚动位置高于或等于 #header 的高度，这将使 .test 类淡入/淡出 -