使用jQuery在页面上添加和删除不同高度的类

时间:2016-02-19 13:38:15

标签: javascript jquery if-statement scroll

当用户与顶部的距离不同时,我希望删除/添加类。

我已经成功完成了它,它工作正常,但我认为我做错了,我希望你帮助优化代码。

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/

先谢谢你们!

1 个答案:

答案 0 :(得分:1)

Here就是我想出来的:

stylePoints

它不比你当前的jQuery长得多,并允许(理论上)无限数量的样式更改,而无需添加一百万长if / else语句。要添加新样式更改,必须在三个数组中的每个数组的末尾添加一个值。 scrollTop()指定应添加或删除样式的styleTo值。 styleType指定要添加或删除的类。 stylePoints指定当用户滚动以上相应的stylePoints值时是应添加还是删除此类。当用户在下方或相应的tall值滚动时,将发生相反的情况。例如,当用户在remove上方滚动时,您可以从代码中看到header类将200来自200,并在用户输入时添加滚动到下方或{{1}}。