javascript - 当滚动经过页面的某个点时显示一个 div

标签 javascript jquery html scroll

我的目标是,一旦有人向下滚动页面一定数量的像素,固定的 div 就会出现在页面顶部。基本上一旦标题部分不在 View 中,就会出现此 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();

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

最佳答案

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

关于javascript - 当滚动经过页面的某个点时显示一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13549214/

相关文章:

javascript - “listener” 参数必须是函数类型。 MacOS 上的 Node.JS 9.3.0_1 有问题

javascript - 使用删除功能将自动完成 TextView 中的选定值添加到 div

java - 如何区分 servlet 中同一页面中的不同超链接?

html - XLT 在 xml 标签之间交叉引用来决定应该添加什么类属性

php - 如何在php中使用时间戳

javascript - xhr 对象在 Firefox 和 Chrome 中没有 "withCredentials"属性

javascript - 如何在 jQuery 中第二次单击时删除类

更新 html 时 jQuery 更改事件丢失

jquery - jQueryUI 模式的奇怪问题

javascript - 对对象数组进行排序并从对象返回特定值的数组