当用户与顶部的距离不同时,我希望删除/添加类。
我已经成功完成了它,它工作正常,但我认为我做错了,我希望你帮助优化代码。
html很简单,基本上各节(包括标题)都有100%的宽度。和不同的颜色。我希望在第一部分(为了美学目的)时使标题改变颜色。 当页面滚动超过1个像素时,我也希望它有一个阴影。
我是通过添加/删除类来实现的。
当我使用一个大的if if语句时它不能很好地工作,因为无论何时匹配任何条件,js都会停止检查其他匹配,因此它不会应用所需的所有类。
下一段代码可行,但正如我所说,我认为它不是最佳/不好写的。 这是HTML标记:
<header class="dark no-shadow">
Header
</header>
<section class="blue">
Please Scroll Down to see the header changes...
</section>
<section>
The header color Should change when you pass through me.
</section>
这是jQuery代码:
var header = $('header'),
blueSection = $('section.blue'),
// Calculate when to change the color.
offset = blueSection.offset().top + blueSection.height() - header.height();
$(window).scroll(function(){
var scroll = $(window).scrollTop();
// Remove Class "dark" after scrolling over the dark section
if (scroll >= offset) {
header.removeClass('dark');
} else {
header.addClass('dark');
}
// Remove Class "no-shadows" whenever not on the top of the page.
if (scroll >= 1) {
header.removeClass('no-shadow');
} else {
header.addClass('no-shadow');
}
});
对于那些喜欢使用jsfiddle的人(像我一样!): https://jsfiddle.net/shock/wztdt077/6/
先谢谢你们!
答案 0 :(得分:1)
Here就是我想出来的:
stylePoints
它不比你当前的jQuery长得多,并允许(理论上)无限数量的样式更改,而无需添加一百万长if / else语句。要添加新样式更改,必须在三个数组中的每个数组的末尾添加一个值。 scrollTop()
指定应添加或删除样式的styleTo
值。 styleType
指定要添加或删除的类。 stylePoints
指定当用户滚动以上相应的stylePoints
值时是应添加还是删除此类。当用户在下方或相应的tall
值滚动时,将发生相反的情况。例如,当用户在remove
上方滚动时,您可以从代码中看到header
类将200
来自200
,并在用户输入时添加滚动到下方或{{1}}。