基于垂直滚动的jQuery添加/删除类？

所以基本上我想在用户向下滚动一点之后从“标题”中删除类，并添加另一个类来改变它的外观。

试图找出这样做的最简单的方法，但我不能使它的工作。

$(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll <= 500) { $(".clearheader").removeClass("clearHeader").addClass("darkHeader"); } } 

CSS

 .clearHeader{ height: 200px; background-color: rgba(107,107,107,0.66); position: fixed; top:200; width: 100%; } .darkHeader { height: 100px; } .wrapper { height:2000px; } 

HTML

 <header class="clearHeader"> </header> <div class="wrapper"> </div> 

我确信我正在做一些非常基本的错误。

Answer 1

 $(window).scroll(function() { var scroll = $(window).scrollTop(); //>=, not <= if (scroll >= 500) { //clearHeader, not clearheader - caps H $(".clearHeader").addClass("darkHeader"); } }); //missing ); 

小提琴

另外，通过删除clearHeader类，您将删除position:fixed; 从元素以及通过$(".clearHeader")select器重新select它的能力。 我build议不要删除该类，并在其上添加一个新的CSS类用于样式目的。

如果您想在用户滚动备份时“重置”类别添加：

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

小提琴

编辑：这里的版本caching头select器 – 更好的性能，因为它不会每次滚动查询DOM，你可以安全地删除/添加任何类的头元素，而不会丢失的引用：

 $(function() { //caches a jQuery object containing the header element var header = $(".clearHeader"); $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 500) { header.removeClass('clearHeader').addClass("darkHeader"); } else { header.removeClass("darkHeader").addClass('clearHeader'); } }); }); 

小提琴

Answer 2

这个值是打算吗？ if (scroll <= 500) { ...这意味着它发生从0到500，而不是500和更大。 在原来的post中你说“用户滚动一下之后”

Answer 3

添加一些过渡效果，如果你喜欢：

http://jsbin.com/boreme/17/edit?html,css,js

 .clearHeader { height:50px; background:lightblue; position:fixed; top:0; left:0; width:100%; -webkit-transition: background 2s; /* For Safari 3.1 to 6.0 */ transition: background 2s; } .clearHeader.darkHeader { background:#000; } 

Answer 4

它是我的代码

 jQuery(document).ready(function(e) { var WindowHeight = jQuery(window).height(); var load_element = 0; //position of element var scroll_position = jQuery('.product-bottom').offset().top; var screen_height = jQuery(window).height(); var activation_offset = 0; var max_scroll_height = jQuery('body').height() + screen_height; var scroll_activation_point = scroll_position - (screen_height * activation_offset); jQuery(window).on('scroll', function(e) { var y_scroll_pos = window.pageYOffset; var element_in_view = y_scroll_pos > scroll_activation_point; var has_reached_bottom_of_page = max_scroll_height <= y_scroll_pos && !element_in_view; if (element_in_view || has_reached_bottom_of_page) { jQuery('.product-bottom').addClass("change"); } else { jQuery('.product-bottom').removeClass("change"); } }); }); 

它的工作很好