Question

我的目标是，当有人在页面上滚动一定数量的像素时，会在页面顶部显示一个固定的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();

我只想知道如何让它出现。如果有人知道已经通过向上滑动和向下滑动动画的代码片段，那将非常受欢迎，但不是必需的。

Answer 1

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

Answer 2

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

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

Answer 3

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

DEMO：http://jsfiddle.net/DerekL/8eG2A/

滚动浏览页面的某个点时会显示div

3 个答案: