Question

我已经参考了下面的网站，我想添加文字效果，即不透明度在页面滚动时淡出。上面的代码工作正常，如果我使用下面的参考，但如果我添加许多div然后它早期褪色不到达所需的div

这就是我所做的，文字淡入淡出效果很快就达到了实际的div。有没有其他方法可以解决这个问题？

 <div>
        fsdfdfsdfffffffffff<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>><br><br><br>
    </div>
    <div class="block">
        <h2>Fade this in / out as scroll down</h2>
    </div>

    <div class="content">
        <div class="headerbar">
        </div>
    </div>

Answer 1

尝试

$(window).scroll(function() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      if (scrollTop > 200) {
            $('.block').stop(true, true).fadeOut();
      }
      else {
            $('.block').stop(true, true).fadeIn('fast');
      }
});

Fiddle

Answer 2

current_div="div1";

        $(window).scroll(function() {
            current_div = scroll_content();
            console.log(current_div);
            if(current_div=="last"){
             don't fade out
          }
        });

        function scroll_content(){
             var winTop = $(this).scrollTop();
            var $divs = $('section');

            var top = $.grep($divs, function(item) {
                return $(item).position().top <= winTop;
            });
            var cur=top[top.length - 1];
            return $(cur).attr('id');
        }

您可以在滚动时获取离开屏幕的div的ID。所以你可以在获得id之后做你想做的div。

它对我有用。如果您有任何其他疑问，请告诉我。

如果我在页面滚动

2 个答案: