Question

我只需要在向下滚动时显示div并同时删除另一个div。我尝试使用此代码，这正如我预期的那样工作。问题是，如果我滚动到顶部我需要显示删除的类并隐藏当前类。（对面）

这是我的代码。

    $(window).scroll(function() {    
     var scroll = $(window).scrollTop(); 
     if (scroll >= 0) {   
     $(".left-nav").removeClass("white-nav");  
    }
  });

什么是最佳解决方案？

Answer 1

只需使用addClass()在scrollTop为0时添加课程，因为您已经检查了scroll >= 0，您只需要添加else，如下所示：

 $(window).scroll(function() {
     var scroll = $(window).scrollTop(); 
     if (scroll > 0) {   
        $(".left-nav").removeClass("white-nav");  
     } else {
        $(".left-nav").addClass("white-nav");
     }
 });

Answer 2

$(window).scroll(function() {    
  var scroll = $(window).scrollTop(); 
  $(".left-nav").toggleClass("white-nav", scroll <= 0);
});

但请注意，滚动事件处理程序中的复杂代码在滚动页面时可能会导致性能滞后。特别是滚动期间的DOM操作会导致严重的性能问题。

Answer 3

您可以使用toggleClass（）来执行此操作 http://api.jquery.com/toggleclass/

<? php code ?>

Answer 4

＆＃13;

$(window).scroll(function() {     
   $(".left-nav").toggleClass("white-nav", $(window).scrollTop() <= 0); 
});

＆＃13;

.white-nav{
  color:red
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='left-nav white-nav'>Hey</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div>nothing here</div>

＆＃13;

向下滚动时显示/删除类

4 个答案: