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

Question

因此，基本上，我想在用户向下滚动并添加另一个类以更改外观后从“标题”中删除该类。

试图找出最简单的方法，但我无法使其正常工作。

$(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() {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; var scroll = $(window).scrollTop();&nbsp; &nbsp; &nbsp;//>=, not <=&nbsp; &nbsp; if (scroll >= 500) {&nbsp; &nbsp; &nbsp; &nbsp; //clearHeader, not clearheader - caps H&nbsp; &nbsp; &nbsp; &nbsp; $(".clearHeader").addClass("darkHeader");&nbsp; &nbsp; }}); //missing );另外，通过删除clearHeader该类，可以position:fixed;从元素中删除，并可以通过$(".clearHeader")选择器重新选择它。我建议不要删除该类，并在其顶部添加一个新的CSS类以用于样式设计。如果要在用户向上滚动时“重置”类添加，请执行以下操作：$(window).scroll(function() {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; var scroll = $(window).scrollTop();&nbsp; &nbsp; if (scroll >= 500) {&nbsp; &nbsp; &nbsp; &nbsp; $(".clearHeader").addClass("darkHeader");&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; $(".clearHeader").removeClass("darkHeader");&nbsp; &nbsp; }});编辑：这是标题选择器的版本缓存-更好的性能，因为它不会在每次滚动时查询DOM，并且可以安全地删除/添加任何类到标题元素而不会丢失引用：$(function() {&nbsp; &nbsp; //caches a jQuery object containing the header element&nbsp; &nbsp; var header = $(".clearHeader");&nbsp; &nbsp; $(window).scroll(function() {&nbsp; &nbsp; &nbsp; &nbsp; var scroll = $(window).scrollTop();&nbsp; &nbsp; &nbsp; &nbsp; if (scroll >= 500) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; header.removeClass('clearHeader').addClass("darkHeader");&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; header.removeClass("darkHeader").addClass('clearHeader');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});

Answer 2

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