JQuery ScrollTop add/removeClass 到元素

Question

我正在为一件简单的事情而苦苦挣扎。当用户滚动超过 600px 时，我尝试使一个元素 (phone img) 固定，并在他在本节末尾时再次取消固定。但是当他滚动回到顶部时它并没有固定。为什么？我做错了什么？

一般来说，我正在尝试在这个 phone 中制作一些过渡和动画连接到滚动事件，一些关于如何使用应用程序的教程。

这是我的问题的代码笔： 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; 
}

Answer 1

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

这是您要找的吗？

$(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');
    }
});

Answer 2

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

$(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 是否有 class。

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

}

Answer 3

您的 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时，你可以去掉class 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 语句），但您可以使用此逻辑

Answer 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

JQuery ScrollTop add/removeClass 到元素

JQuery ScrollTop add/removeClass to element

javascript

css

jquery

scroll

scrolltop