Jquery 根据节ID为每次滚动添加类到正文_Jquery_Scroll_Scrolltop

Jquery 根据节ID为每次滚动添加类到正文

jquery scroll

Jquery 根据节ID为每次滚动添加类到正文,jquery,scroll,scrolltop,Jquery,Scroll,Scrolltop,我有一个这样的页面布局 <body> <section id="s1">...</div> <section id="s2">...</div> <section id="s3">...</div> </body> ... ... ... 每当通过滚动达到顶部时，我需要将类添加到body标记。如用于#s1部分和用于#s2。如何使用jquery实现这一点请帮忙。你应该查一下 $(wi

我有一个这样的页面布局

<body>
  <section id="s1">...</div>
  <section id="s2">...</div>
  <section id="s3">...</div>
</body>


...
...
...

每当

通过滚动达到顶部时，我需要将类添加到body标记。如

用于

#s1

部分和

用于

#s2

。如何使用jquery实现这一点

请帮忙。

你应该查一下

$(window).scrollTop() and $(element).offset()

然后比较这两种情况

$(window).scroll( function() { } );

在那里，您可以看到哪个元素最靠近窗口的上边框，并根据该元素进行操作

这就是你需要的吗？

这可能就是你想要的：

…只要两个类具有相同的优先级“点”，CSS就会解决该问题。此外，如果页面中有大量的

部分，性能可能会受到影响
var bodyEl = $("body");
$(window).on("scroll", function() {
    var scrollTop = $(this).scrollTop();
    $("section").each(function() {
        var el = $(this),
            className = el.attr("id");
        if (el.offset().top < scrollTop) {
            bodyEl.addClass(className);  
        } else {
            bodyEl.removeClass(className);
        }
    });
});

<body class="s1 s2">