如何使用 jQuery 根据垂直滚动位置动态更改标题的类？-css教程-PHP中文网

如何使用 jQuery 根据垂直滚动位置动态更改标题的类？

Susan Sarandon

发布： 2024-12-03 19:50:14

原创

401 人浏览过

How Can I Dynamically Change a Header's Class Based on Vertical Scroll Position Using jQuery?

基于 JQuery 的垂直滚动类操作

问题：

您的目标是修改当用户滚动时标题元素的类，改变其外观。但是，您当前的方法未按预期运行。

解决方案：

<br>$(window).scroll(function() {<pre class="brush:php;toolbar:false">var scroll = $(window).scrollTop();

// Update using correct operator (>=, not <=)
if (scroll >= 500) {
    // Use correct class name (clearHeader, not clearheader)
    $(".clearHeader").addClass("darkHeader");
}

登录后复制

});

正确语法：

确保正确使用 > = 运算符和clearHeader 类名至关重要。此外，请勿删除clearHeader类，因为它会删除固定定位及其再次选择的能力。

重置类：

在以下情况下重置类修改向上滚动，使用这个代码:

<br>$(window).scroll(function() {<pre class="brush:php;toolbar:false">var scroll = $(window).scrollTop();

if (scroll >= 500) {
    $(".clearHeader").addClass("darkHeader");
} else {
    $(".clearHeader").removeClass("darkHeader");
}

登录后复制

});

性能优化：

为了更好效率，缓存 header 的 jQuery 对象：

<br>$(function() {<pre class="brush:php;toolbar:false">var header = $(".clearHeader");
$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= 500) {
        header.removeClass('clearHeader').addClass("darkHeader");
    } else {
        header.removeClass("darkHeader").addClass('clearHeader');
    }
});

登录后复制

});

以上是如何使用 jQuery 根据垂直滚动位置动态更改标题的类？的详细内容。更多信息请关注PHP中文网其他相关文章！