在滚动时更改 CSS 属性

Posted 2023-03-06

【中文标题】在滚动时更改 CSS 属性

【英文标题】：Changing CSS properties on scroll

【发布时间】：2012-08-27 14:46:29

【问题描述】：

我正在设计一个 html/CSS 模板。我有一个带有 CSS3 渐变和相对位置的标题。 我想要 。当访问者开始向下滚动时。标题属性更改为另一个属性。 我可以用 jQuery 做到这一点吗？ 并提前感谢:)

【问题讨论】：

不确定您到底在寻找什么，但结合$(window).scroll 和检查$(window).scrollTop() 应该是一个好的开始。

【参考方案1】：

http://api.jquery.com/scroll/

$(your-selector).scroll(function() 

 $(your-object-to-change-css).addClass('new_class');
 $(your-object-to-change-css).removeClass('old_class');

);

【讨论】：

非常感谢。效果很好，但是！当我来到默认位置时，它仍然是滚动类。

@KhalidKhalil 在这种情况下，您需要在 .scroll() 处理程序中检查这一点：if(window.scrollTop == 0) $("#header").removeClass("scrollClass"); 。

是的，这正是我想要的，但不幸的是这段代码不起作用。签出： $(window).scroll(function() $("header").addClass('scroll'); if(window.scrollTop == 0) $("header").removeClass('scroll' ) ; );