Question

当有人在我的网站上滚动时，我希望除#header之外的所有元素都不透明。直接滚动停止时，它应该再次以完全不透明度淡化。

因此，如果有人滚动，不透明度应该为0.5，如果访问者停止滚动，则不透明度应该变回1.

滚动时我有一个固定的标题跟随网站，所以最好的事情就是如果我的元素#header不受此影响。

Answer 1

    $('.fade').each(function() {
        var objectBottom = $(this).offset().top + $(this).outerHeight();
        var windowBottom = $(window).scrollTop() + $(window).innerHeight();

        if (objectBottom < windowBottom) { (scrolling down)
            if ($(this).css('opacity')==0) {$(this).fadeTo(500,1);}
        } else {  (scrolling up)
            if ($(this).css('opacity')==1) {$(this).fadeTo(500,0);}
        }
    });

Answer 2

一些jQuery可以为你处理这个问题：

jQuery(document).ready(function () {
    (function() {
        var timer;
        $(window).bind('scroll',function () {
            clearTimeout(timer);
            $('yourElem').addClass('is-scrolling');
            // time before scrolling is registered as stopped
            timer = setTimeout( refresh , 500 );
        });
        var refresh = function () { 
            $('yourElem').removeClass('is-scrolling');
        };
    })();
});

然后在页面上抛出一些CSS

.is-scrolling {
  opacity: 0;
     -moz-transition: opacity 0.3s ease-out;
       -o-transition: opacity 0.3s ease-out;
  -webkit-transition: opacity 0.3s ease-out;
          transition: opacity 0.3s ease-out;
}

滚动时如何改变身体不透明度？

2 个答案: