Question

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

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

有什么建议吗？谢谢！

Answer 1

该功能可为您提供有关您在页面中的位置的信息scrollTop()。有了它，你可以检测你是否已超过某个点，然后修改项目的CSS以使其成为position: fixed。

以下是一个例子：

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

And here's a JSFiddle showing how it works.

Answer 2

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

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

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

2 个答案: