javascript jQuery 在两个类之间滚动切换

jQuery on scroll toggle between two classes

提问by agis

By default I have a navigation bar which has a red background color.

默认情况下，我有一个具有红色背景颜色的导航栏。

What I want to do is when the users scrolls down more than 100px to change the background to blue and if he goes back to 0px to change the background to it's default state.

我想要做的是当用户向下滚动超过 100px 以将背景更改为蓝色时，如果他返回 0px 以将背景更改为默认状态。

I want to do this by toggling between two classes, for example <div class="navigation red">should be the default class and if the user scroll down to add <div class="navigation blue">and if he scrolls back to have <div class="navigation red">again.

我想通过在两个类之间切换来做到这一点，例如 <div class="navigation red">应该是默认类，如果用户向下滚动添加 <div class="navigation blue">，如果他<div class="navigation red">再次滚动回来 。

Here is my attempt :

这是我的尝试：

$(document).ready(function(){
  $(window).scroll(function(){
    if ($(window).scrollTop() > 100){
        $('.navigation').toggleClass( "blue");
    }
 });
});

But this is not working. Here's a jsbin.

但这行不通。这是一个jsbin。

Any ideas how to get it to work ?

任何想法如何让它工作？

回答by NeoMan

Try the following code:

试试下面的代码：

$(document).ready(function () {
    $(window).scroll(function () {
        $('.navigation').toggleClass("blue", ($(window).scrollTop() > 100));
     });
});

Here's the example in jsbin

这是jsbin中的例子

回答by Control Freak

Using toggleClass()may be the wrong solution for this. Use addClass/removeClassinstead:

使用toggleClass()可能是错误的解决方案。使用addClass/removeClass代替：

if ($(window).scrollTop() > 100){
    $('.navigation').addClass( "blue");
}
else {
    $('.navigation').removeClass("blue");
}

回答by Martin

The problem is that you call toggleClass everytime the user scrolls. This code would fix this issue:

问题是您每次用户滚动时都会调用 toggleClass。此代码将解决此问题：

$(document).ready(function(){
    $(window).scroll(function(){
        if ($(window).scrollTop() > 100 && !$( ".navigation" ).hasClass( "blue" ) || $(window).scrollTop() === 0 && $( ".navigation" ).hasClass( "blue" ){
            $('.navigation').toggleClass( "blue");
        }

    });
});

The jsbin

该jsbin

回答by Giannis Grivas

You can use .addClass()and removeClass()like this one: http://jsfiddle.net/csdtesting/qhfmw8hx/

您可以使用.addClass()并removeClass()喜欢这个：http: //jsfiddle.net/csdtesting/qhfmw8hx/

$(window).scroll(function() {
  var windowYmax = 100;
  var scrolledY = $(window).scrollTop();

  if (scrolledY > windowYmax) {

    $('.navigation').addClass("blue");
  } else {
    $('.navigation').removeClass("blue");
    $('.navigation').addClass("red");
  }
});

.navigation {
  height: 800px;
}
.navigation.red {
  background: red;
}
.navigation.blue {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation red">scroll me down and up please to see me changing colors...</div>

Hope it helps!

希望能帮助到你！

回答by Lbatson

You're working with adding a class and removing another, i would suggest just using addClass and removeClass for this case. Also you can chain the methods.

您正在添加一个类并删除另一个类，我建议在这种情况下只使用 addClass 和 removeClass 。您也可以链接方法。

$(document).ready(function(){
  $(window).scroll(function(){
    if ($(window).scrollTop() > 100){
      $('.navigation').addClass('blue').removeClass('red');
    } else {
      $('.navigation').addClass('red').removeClass('blue');
    }
  });
});

Here's the jsbin

这是jsbin