JQuery ScrollTop 向元素添加/删除类答案

【问题标题】：JQuery ScrollTop add/removeClass to elementJQuery ScrollTop 向元素添加/删除类
【发布时间】：2018-03-16 18:03:37
【问题描述】：

我正在为一件简单的事情而苦苦挣扎。当用户滚动超过 600 像素时，我尝试修复一个元素（手机 img），并在他在本节末尾时再次修复它。但是当他滚动回到顶部时，它并没有修复。为什么？我做错了什么？

一般来说，我会尝试在这款手机内部制作一些与滚动事件相关的过渡和动画，以及如何使用应用程序的某种教程。

这是我的问题的代码笔： https://codepen.io/anon/pen/YaGqRB?editors=1010 还有我丑陋的 JQuery：

$(window).scroll(function () {
    if ($(window).scrollTop() > 584) {
      $('.phone-container').addClass('phone-container-fixed');
    }if ($(window).scrollTop() > 2201) {
      $('.phone-container').removeClass('phone-container-fixed');  
      $('.phone-container').addClass('phone-container-fixed-bot');

   }
 });

css:

.phone-container{
position: relative;
top: 40px;  
}
.phone-container-fixed{
position: fixed;
top: 50px;
}
.phone-container-fixed-bot{
position: absolute;
top: 2420px; 
}

【问题讨论】：

标签： javascript jquery css scroll scrolltop

【解决方案1】：

当您向上滚动时，您可能想要删除已添加的课程。

这就是你要找的吗？

$(window).scroll(function () {
    if($(window).scrollTop() <= 600) {
         $('.phone-container').removeClass('phone-container-fixed');
    }
    if ($(window).scrollTop() > 600) {
        $('.phone-container').removeClass('phone-container-fixed-bot');
        $('.phone-container').addClass('phone-container-fixed');
    }

    if ($(window).scrollTop() > 2201) {
        $('.phone-container').removeClass('phone-container-fixed');  
        $('.phone-container').addClass('phone-container-fixed-bot');
    }
});

【讨论】：

【解决方案2】：

您的 css 重叠。你有两种方法：

将!important 添加到您的phone-container-fixed：

$(window).scroll(function () {
    if ($(window).scrollTop() > 600) {
        $('.phone-container').addClass('phone-container-fixed');
    }
    if ($(window).scrollTop() > 2201) {
        $('.phone-container').removeClass('phone-container-fixed');         $('.phone-container').addClass('phone-container-fixed-bot');
    }
 });

$(window).scroll(function() {
    var windowTop = $(window).scrollTop();
    $("#output").html(windowTop);
});

.one{
  postion: absolute;
  height: 700px;
  background-color: lightgreen;
}
.two{
  postion: absolute;
  height: 3000px;
  width: auto;
}
.phone-container{
    position: relative;
    top: 40px;  
}
.phone-container-fixed{
    position: fixed !important;
    top: 50px !important;
}
.phone-container-fixed-bot{
    position: absolute;
    top: 2420px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="one">
    <p id="output" style="position:fixed; left:20px; top:10px; padding:10px; font-weight:bold">
      You have scrolled the page by:
</div>
<div class="two">
    <div class="phone-container">
        <img src="https://image.ibb.co/mpqaVH/phone_frame.png" alt="Phone frame">
    </div>
</div>

或者，你可以在scroll低于2201的时候去掉phone-container-fixed-bot这个类（你可以添加到第一个if条件中）：

$(window).scroll(function () {
    if ($(window).scrollTop() > 600) {
        $('.phone-container').removeClass('phone-container-fixed-bot');
        $('.phone-container').addClass('phone-container-fixed');
    }
    if ($(window).scrollTop() > 2201) {
        $('.phone-container').removeClass('phone-container-fixed');
        $('.phone-container').addClass('phone-container-fixed-bot');
    }
 });

$(window).scroll(function() {
    var windowTop = $(window).scrollTop();
    $("#output").html(windowTop);
});

.one{
  postion: absolute;
  height: 700px;
  background-color: lightgreen;
}
.two{
  postion: absolute;
  height: 3000px;
  width: auto;
}
.phone-container{
    position: relative;
    top: 40px;  
}
.phone-container-fixed{
    position: fixed;
    top: 50px;
}
.phone-container-fixed-bot{
    position: absolute;
    top: 2420px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="one">
    <p id="output" style="position:fixed; left:20px; top:10px; padding:10px; font-weight:bold">
      You have scrolled the page by:
</div>
<div class="two">
    <div class="phone-container">
        <img src="https://image.ibb.co/mpqaVH/phone_frame.png" alt="Phone frame">
    </div>
</div>

第二个不是最好的解决方案（if-else 语句），但你可以使用这个逻辑

【讨论】：

非常感谢：）我一定累了，因为现在我明白了：）
有时明显的并不那么明显！

【解决方案3】：

这是因为当用户向上滚动时，您没有删除 .phone-container-fixed-bot 类..

$(window).scroll(function () {
        if ($(window).scrollTop() > 600) {
          $('.phone-container').addClass('phone-container-fixed');
        }if ($(window).scrollTop() > 2201) {
          $('.phone-container').removeClass('phone-container-fixed');  
          $('.phone-container').addClass('phone-container-fixed-bot');

       } if ($(window).scrollTop() < 2201) {
         $(".phone-container").removeClass('phone-container-fixed-bot');
       }if ($(window).scrollTop() < 600) { 
         $(".phone-container").removeClass('phone-container-fixed');
       }
 });

现在这很脏，但您也可以在尝试删除之前检查 div 是否有类。

if ($( "#mydiv" ).hasClass( "foo" )) {

}

【讨论】：

【解决方案4】：

您需要引入条件的else 部分

$(window).scroll(function() {
  if ($(window).scrollTop() > 600) {
    $('.phone-container').addClass('phone-container-fixed');
  } else {
    $('.phone-container').removeClass('phone-container-fixed');
  }

  if ($(window).scrollTop() > 2201) {
    $('.phone-container').addClass('phone-container-fixed-bot');
  } else {
    $('.phone-container').removeClass('phone-container-fixed-bot');
  }
});

Updated Codepen

【讨论】：