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

Question

我有一个'后退按钮'，我想坚持到标题，直到你滚过某个点（所以我把它放在绝对的位置，但是当你滚过标题时它会被定位'固定'）。

有点像'GAMEHQ'部分在这里： http ：//scores.espn.go.com/mlb/preview？gameId = 311027124

有什么建议么？ 谢谢！

Answer 1

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

这是一个例子：

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

这是一个JSFiddle，展示它是如何工作的。

Answer 2

这个例子使用jQuery但可以很容易地改变。 此功能应该接近您想要的。 100是您想要更改#nav类的页面下方的像素数。 在你的CSS中，你需要确保你有一个#nav.scrolling声明来处理对position: fixed的修改position: fixed 。

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