Question

我正在寻找有关如何重新创建此功能的一些指导。正如你可以看到的那样，如果向下滚动不透明度变化，标题会随着下面的div出现而消失。任何可以帮助我的想法或教程？ http://davegamache.com/

直到现在我只尝试了$(window).scroll(function(){…});我可以向下滚动到某个触发器并弹出一个小div的例子。我想我现在也必须玩不透明度。有什么帮助吗？

Answer 1

您使用$(window).scroll(function(){…});

有正确的想法

你想要找出你希望div不可见的Y坐标，并从中计算div的不透明度。大多数时候，我认为这个最大Y坐标应该与受影响的div的高度相同。可以说我们的div高度为500px。如果div在Y坐标500处应为0不透明度，则在y坐标100处不透明度应为20％（或.2）

工作样本：http://jsfiddle.net/FzNrG/5/

$(window).scroll(function(){
    var opacity = 1- ( $(window).scrollTop() / $('#theDiv').height());
    if (opacity>1) opacity=1;
    if (opacity<0) opacity=0;

    //$('#debug').html('ScrollTop:' + $(window).scrollTop() + '<br>Opacity: ' + opacity);
    $('#theDiv').stop().fadeTo(250, opacity);    
});

Answer 2

$(window).scroll(function(){…});

是一个好的开始......它会在您开始滚动时触发您想要的任何内容。例如，只是放一些.height（）;在它中读取元素高度，如果它想要的某个数字低于或高于.nimate（）;喜欢不透明......只是玩一下。

Answer 3

建议阅读链接页面的源代码:(评论也很好）

function slidingTitle() {
    //Get scroll position of window
    windowScroll = $(this).scrollTop();

    //Slow scroll of .art-header-inner scroll and fade it out
    $artHeaderInner.css({
       'margin-top' : -(windowScroll/3)+"px",
       'opacity' : 1-(windowScroll/550)
    });

    //Slowly parallax the background of .art-header
    $artHeader.css({
       'background-position' : 'center ' + (-windowScroll/8)+"px"
    });

   //Fade the .nav out
   $nav.css({
      'opacity' : 1-(windowScroll/400)
   });
}

使用JavaScript / jQuery向下滑动效果

3 个答案: