使用JavaScript/jQuery实现向下滑动效果

我正在寻找一些关于如何重新创建此功能的指导。如你所见，如果你向下滚动，不透明度会改变，标题会随着下面的div的出现而消失。有什么想法或教程可以帮助我吗

---

到目前为止，我只尝试了

$（window）.scroll（function（）{…}）我可以向下滚动到某个触发器并弹出一个小div，例如。我想我现在也要玩不透明了。有什么帮助吗？
您使用
$（窗口）有正确的想法。滚动（function（）{…}）

您需要计算出希望div不可见的Y坐标，并由此计算div的不透明度。大多数情况下，我认为这个最大Y坐标应该与受影响div的高度相同。假设我们的div的高度是500px。如果div在Y坐标500处的不透明度为0，则在Y坐标100处的不透明度应为20%（或0.2）

工作样本：

$（窗口）。滚动（函数（）{
var opacity=1-（$（窗口）.scrollTop（）/$（'#theDiv'）.height（））；
如果（不透明度>1）不透明度=1；
if（不透明度）
这是一个很好的开始…当你启动一个卷轴时，它会触发你想要的任何东西。例如，只要在其中放入一些.height（）；来读取元素的高度，如果它低于或高于你想要启动的某个数字。animate（）；像不透明度一样…只需播放一点。
建议阅读链接页面的源代码：（注释也很好）

我在Firefox中看不到任何问题。-在IE7中也注意到了一些问题，但没有与标题淡出有关的问题。太好了！但是如果我不想让bg图像淡出，而只想看标题，那该怎么办？为此标题使用一个额外的元素（只包含文本，没有样式）外部已经存在，可以处理与您的背景样式。只需设置仅文本元素的动画，只有文本将淡入淡出或设置动画。这是一个仅文本淡入淡出的工作示例。唯一的区别是，我已将文本包含在次要div
fadeDiv
中，当我调用
fadeTo（）时
，我引用的是文本div，而不是BG容器：
$(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);    
});

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

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