11

我的目标是一旦有人向下滚动页面一定数量的像素，就会在页面顶部显示一个固定的 div。基本上，一旦标题部分不在视野范围内，就会出现这个 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();

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

4

3 回答 3

16 
window.addEventListener("scroll",function() { 
   if(window.scrollY > 500) {
      $('.fixedDiv').slideDown();
   }
   else {
      $('.fixedDiv').slideUp();
   }
},false);
于 2012-11-25T07:54:57.987 回答
1

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

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

于 2012-11-25T09:09:15.993 回答
0 
window.addEventListener("scroll",function() { 
   $('.fixedDiv')[(window.scrollY > 500)?"slideDown":"slideUp"]();
},false);

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

于 2012-11-25T08:33:58.553 回答