Question

我正在努力，我猜一个简单的事情。当用户滚动超过600px时，我尝试修复一个元素（手机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; 
}

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

Answer 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>

或者，当滚动低于2201时，您可以删除类phone-container-fixed-bot（您可以将其添加到第一个条件中）：

$(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 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" )) {

}

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添加到元素

4 个答案: