Question

我有this正在处理一个项目，但我想在页面的顶部和底部做同样的效果。

E.g。在页面底部，当滚动到视图外时滚动到视图/淡出时元素淡入。页面顶部也是如此，元素逐渐淡出视野，然后逐渐消失。

我试图创造相反的效果，但它们似乎相互抵消，没有元素显示或滚动时闪烁。

    $(window).scroll(function() {
    $(".fade").each(function() { 
        var height = $(".header").outerHeight(true);

        if (($(this).offset().top - $(window).scrollTop()) < height / 1.5) { 
            $(this).stop().fadeTo("fast", 0);
        } else {
            $(this).stop().fadeTo("fast", 1); 
        }       
    });
});

这可能吗或我遗失了什么？

Answer 1

在滚动时显示/隐藏页面上的元素的主要思想是在每个滚动事件检查这些块是否在当前视图中你的代码的问题是fadeOut / In隐藏了动画结尾处的元素（display：none），所以在那之后我们无法获得当前的offset（）。我建议你做的只是使用fadeTo（）;

来改变块的不透明度

我为你做了这个例子 https://jsfiddle.net/9uqom17x/

$(window).scroll(function(){

    var height = $(window).innerHeight();
    var currentScroll = $(window).scrollTop()+height;

    $(".fade").each( function(){
            var $this = $(this);

            var _scrollTop = $this.offset().top;
            var _height = $this.innerHeight();

            if(_scrollTop+_height/2 < currentScroll ){
        if(! $this.hasClass("active")){
          $this.stop().addClass("active")
            .fadeTo(500, 1);        
        }
            } else {
                $this.stop().removeClass("active")
            .fadeTo(500, 0);
            }
    });
}).trigger("scroll");

玩得开心。

淡入/淡出元素

1 个答案: