滚动经过页面的某个点时显示 div答案

【问题标题】：Make a div appear when scrolling past a certain point of a page滚动经过页面的某个点时显示 div
【发布时间】：2012-11-13 00:09:59
【问题描述】：

我的目标是一旦有人向下滚动页面一定数量的像素，就会在页面顶部显示一个固定的 div。基本上一旦header部分不在视野范围内，就会出现这个div。

我查看了与我想要的类似的代码；但是，还没有看到任何可以让我从页面顶部轻松修改像素数的东西（如果可能的话）。

这是我看到的一段代码，处理通过滚动显示 div。

// Get the headers position from the top of the page, plus its own height
var startY = $('header').position().top + $('header').outerHeight();

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

function checkY(){
    if( $(window).scrollTop() > startY ){
        $('.fixedDiv').slideDown();
    }else{
        $('.fixedDiv').slideUp();
    }
}

// Do this on load just in case the user starts half way down the page
checkY();

我只是想知道如何让它出现。如果有人知道一段代码已经与上滑和下滑动画保持一致，那也将不胜感激，但不是必需的。

【问题讨论】：

在您给出的示例中，$('.fixedDiv').slideDown() 正在使 div 出现。该代码对您不起作用吗？这是一个使用该代码的 jsFiddle：jsfiddle.net/BinaryMuse/Ehney
我没有尝试过，因为我不知道如何修改它以在人从顶部滚动超过 500px 时显示。这是我需要的主要内容。
您将使用startY 将第一行更改为您需要的特定Y 位置，而不是根据标题的位置和高度进行计算。这是一个更新的小提琴：jsfiddle.net/BinaryMuse/Ehney/1
我去了你说的那个网站去寻找代码，把所有的东西都复制了出来......在css样式表和html index.php页面之间插入了所有东西，但无法让它工作。它在您展示给我的页面上工作，我逐字复制所有内容，但无法正常工作。知道为什么吗？
您在浏览器 JavaScript 控制台上看到任何错误吗？

标签： javascript jquery html scroll

【解决方案1】：

window.addEventListener("scroll",function() { 
   if(window.scrollY > 500) {
      $('.fixedDiv').slideDown();
   }
   else {
      $('.fixedDiv').slideUp();
   }
},false);

【讨论】：

错误：ReferenceError: $ 未定义.... $('.fixedDiv').slideDown();和 $('.fixedDiv').slideUp();
一个可能的改进是不绑定到滚动事件，而是使用 setInterval 定期检查当前滚动位置。这样，每次滚动时都不会触发句柄，这可能会导致性能下降。另一种方法是绑定到滚动，但仅在一定间隔后再次触发该方法。如何实现此模式的一些示例：github.com/shichuan/javascript-patterns/blob/master/…。这里也提到了这一点：stackoverflow.com/questions/15591002/…

【解决方案2】：

Brandon Tilley 在评论中回答了我的问题...

您可以将带有 startY 的第一行更改为特定的 Y 您需要的位置，而不是根据标题的计算位置和高度。这是一个更新的小提琴： jsfiddle.net/BinaryMuse/Ehney/1

【讨论】：

【解决方案3】：

window.addEventListener("scroll",function() { 
   $('.fixedDiv')[(window.scrollY > 500)?"slideDown":"slideUp"]();
},false);

演示：http://jsfiddle.net/DerekL/8eG2A/

【讨论】：

Error: ReferenceError: $ is not defined.... 和上一个 lostsource 给我的例子一样
@kdjernigan - 应该定义$，因为它指的是jQuery。看看我的演示，它工作正常。