因此,基本上,我想在用户向下滚动并添加另一个类以更改外观后从“标题”中删除该类。
试图找出最简单的方法,但我无法使其正常工作。
$(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>
我确定我在做一些非常基本的错误。
$(window).scroll(function() { var scroll = $(window).scrollTop();
//>=, not <= if (scroll >= 500) { //clearHeader, not clearheader - caps H $(".clearHeader").addClass("darkHeader"); } }); //missing );
另外,通过删除clearHeader该类,可以position:fixed;从元素中删除,并可以通过$(".clearHeader")选择器重新选择它。我建议不要删除该类,并在其顶部添加一个新的CSS类以用于样式设置。
clearHeader
position:fixed;
$(".clearHeader")
如果要在用户向上滚动时“重置”类添加,请执行以下操作:
$(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 500) { $(".clearHeader").addClass("darkHeader"); } else { $(".clearHeader").removeClass("darkHeader"); } });
编辑: 这是标题选择器的版本缓存-更好的性能,因为它不会在每次滚动时查询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'); } }); });