Question

我有这样的页面布局。

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

每当<section>通过滚动与顶部相遇时，我需要将body添加到body标签。例如<body class="s1">部分为#s1，<body class="s2">部分为#s2。如何使用jquery完成此操作？

请帮忙。

Answer 1

这可能是你想要的：

http://jsbin.com/tabolida/1/edit?html,js,output

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);
        }
    });
});

简而言之：在滚动时，每个部分的offset().top都会根据窗口的滚动位置进行检查。如果它更低，则将CSS类添加到正文中;如果它更高，则删除CSS。这可能会导致您的body元素有多个类：

<body class="s1 s2">

...只要两个类具有相同的优先级'points'，它就由CSS解决。此外，如果您的网页中有很多section，性能可能会受到影响。

Answer 2

你应该查找

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

并在

中比较这两者

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

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

这就是你需要的吗？

根据部分ID为每个滚动添加类到主体

2 个答案: