Jquery检测滚动后页面顶部的坐标

jquery detect coordinate of top of page after scrolling

本文关键字:顶部 坐标 检测 滚动 Jquery      更新时间:2023-09-26

我有一个'后退按钮',我想坚持到头部,直到你滚动到某一点(所以我有它的绝对定位,但希望它定位'固定'当你滚动到头部)。

有点像这里的"GAMEHQ"部分:http://scores.espn.go.com/mlb/preview?gameId=311027124

有什么建议吗?谢谢!

为您提供有关页面位置的信息的函数是scrollTop()。有了它,你可以检测你是否超过了某个点,然后修改一个项目的CSS使其成为position: fixed,例如。

下面是一个例子:

$(document).ready(function() {
    $(window).scroll(function() {
        if ($(window).scrollTop() >= 120) {
            $('#topThing').css('position', 'fixed');
        } else {
            $('#topThing').css('position', 'relative');
        }
    });
});

这里有一个JSFiddle显示它是如何工作的

这个例子使用jQuery,但是可以很容易地修改。这个函数应该接近你想要的。100是你想要改变你的#nav类的页面的像素数。在你的CSS中,你会想要确保你有一个#nav.scrolling声明来处理position: fixed的变化。

$(window).scroll(function(){
  if ($(this).scrollTop() > 100) {
    $("#nav").addClass("scrolling");
  }
});