Question

我有一个带有固定类的div，它在滚动时删除很好。

我一直在尝试让div在删除固定类之后继续滚动但它一直隐藏而不是继续滚动

如果有人可以建议/指出我的方向很好

$(window).scroll(function() {
  if ($(document).scrollTop() > 500) {
    $('.content').removeClass('fixed');
  }
});

.container {
  margin-top: 100px;
  height: 1000px;
}

.content {
  position: relative;
}

.fixed {
  position: fixed;
  top: 10%;
  width: 30%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="content fixed">
    <h1>content</h1>
    <p>Donec ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus mauris in porttitor. Nullam
      non enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae eleifend lectus tempus sit amet. </p>
  </div>

</div>

Answer 1

问题在于，当您删除课程.fixed时，您不仅要删除position: fixed声明，还要还删除{{ 1}}和top声明。删除课程后，您只需将这些应用回width。请注意，该元素默认为.content，因此position: relative将不再有效。因此，您需要使用top代替：

＆＃13;

margin-top

＆＃13;

$(window).scroll(function() {
  if ($(document).scrollTop() > 500) {
    $('.content').removeClass('fixed');
    $('.content').css('margin-top', '550px'); // 50px covers the additional scroll
    $('.content').css('width', '30%');
  }
});

＆＃13;

.container {
  margin-top: 100px;
  height: 1000px;
}

.content {
  position: relative;
}

.fixed {
  position: fixed;
  top: 10%;
  width: 30%;
}

＆＃13;

我还创建了一个展示此here的新CodePen。

希望这有帮助！：）

修改：

为了让它回到用户向上滚动时的状态，只需使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="content fixed"> <h1>content</h1> <p>Donec ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus mauris in porttitor. Nullam non enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae eleifend lectus tempus sit amet. </p> </div> </div>条件撤消else条件所做的更改：

if

这是一个有效的例子：

＆＃13;
＆＃13;
else if ($(document).scrollTop() <= 500) { $('.content').addClass('fixed'); $('.content').css('margin-top', '0'); }
＆＃13;
$(window).scroll(function() { if ($(document).scrollTop() > 500) { $('.content').removeClass('fixed'); $('.content').css('margin-top', '550px'); $('.content').css('width', '30%'); } else if ($(document).scrollTop() <= 500) { $('.content').addClass('fixed'); $('.content').css('margin-top', '0'); } });
＆＃13;
.container { margin-top: 100px; height: 1000px; } .content { position: relative; } .fixed { position: fixed; top: 10%; width: 30%; }
＆＃13;
＆＃13;
＆＃13;

我已经更新笔以反映这一点，但仍然可以找到here。

请注意，为了获得真正平稳的过渡，您可能需要使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="content fixed"> <h1>content</h1> <p>Donec ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus mauris in porttitor. Nullam non enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae eleifend lectus tempus sit amet. </p> </div> </div>值margin-top值来播放：）

希望这有帮助！：）

Answer 2

您的codepen按原样运行。它似乎消失的原因是因为paragraph中几乎没有内容。当我在段落中添加更多文本并再次尝试代码时，它工作正常。

亲眼看看http://codepen.io/anon/pen/KWveaX

Snippet展示了toggleClass

$(window).scroll(function() {
  if ($(document).scrollTop() > 500) {
    $('.content').toggleClass('fixed');
  }
});

.container {
  margin-top: 100px;
  height: 1000px;
}

.content {
  position: relative;
  top:0px!important;
}

.fixed {
  position: fixed;
  top: 10%;
  width: 30%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="content fixed">
    <h1>content</h1>
    <p>Donec ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus mauris in porttitor. Nullam
      non enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae eleifend lectus tempus sit amet.Donec ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi eget iaculis.
      Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus mauris in porttitor. Nullam non enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae eleifend lectus tempus sit amet.Donec ut arcu quis enim vehicula aliquam vel
      a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus mauris in porttitor. Nullam non enim eget ante malesuada pharetra. Curabitur
      semper dui quam, vitae eleifend lectus tempus sit amet.Donec ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium dictum venenatis.
      Nulla congue maximus mauris in porttitor. Nullam non enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae eleifend lectus tempus sit amet.Donec ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros eu molestie mattis.
      In at arcu nisi. Nam feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus mauris in porttitor. Nullam non enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae eleifend lectus tempus
      sit amet.Donec ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus mauris in porttitor.
      Nullam non enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae eleifend lectus tempus sit amet.Donec ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi
      eget iaculis. Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus mauris in porttitor. Nullam non enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae eleifend lectus tempus sit amet. Donec ut arcu quis enim vehicula
      aliquam vel a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus mauris in porttitor. Nullam non enim eget ante malesuada pharetra.
      Curabitur semper dui quam, vitae eleifend lectus tempus sit amet.Donec ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium
      dictum venenatis. Nulla congue maximus mauris in porttitor. Nullam non enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae eleifend lectus tempus sit amet.Donec ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros
      eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus mauris in porttitor. Nullam non enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae
      eleifend lectus tempus sit amet.Donec ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus
      mauris in porttitor. Nullam non enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae eleifend lectus tempus sit amet.Donec ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam
      feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus mauris in porttitor. Nullam non enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae eleifend lectus tempus sit amet.Donec ut
      arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus mauris in porttitor. Nullam non enim
      eget ante malesuada pharetra. Curabitur semper dui quam, vitae eleifend lectus tempus sit amet.Donec ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi eget iaculis. Aliquam
      volutpat lectus pretium dictum venenatis. Nulla congue maximus mauris in porttitor. Nullam non enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae eleifend lectus tempus sit amet.Donec ut arcu quis enim vehicula aliquam vel a ligula.
      Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus mauris in porttitor. Nullam non enim eget ante malesuada pharetra. Curabitur semper
      dui quam, vitae eleifend lectus tempus sit amet.Donec ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium dictum venenatis.
      Nulla congue maximus mauris in porttitor. Nullam non enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae eleifend lectus tempus sit amet.Donec ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros eu molestie mattis.
      In at arcu nisi. Nam feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus mauris in porttitor. Nullam non enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae eleifend lectus tempus
      sit amet.Donec ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus mauris in porttitor.
      Nullam non enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae eleifend lectus tempus sit amet.Donec ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi
      eget iaculis. Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus mauris in porttitor. Nullam non enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae eleifend lectus tempus sit amet.Donec ut arcu quis enim vehicula
      aliquam vel a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus mauris in porttitor. Nullam non enim eget ante malesuada pharetra.
      Curabitur semper dui quam, vitae eleifend lectus tempus sit amet.Donec ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium
      dictum venenatis. Nulla congue maximus mauris in porttitor. Nullam non enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae eleifend lectus tempus sit amet.Donec ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros
      eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus mauris in porttitor. Nullam non enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae
      eleifend lectus tempus sit amet.Donec ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus
      mauris in porttitor. Nullam non enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae eleifend lectus tempus sit amet. Donec ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi.
      Nam feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus mauris in porttitor. Nullam non enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae eleifend lectus tempus sit amet.Donec
      ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus mauris in porttitor. Nullam non
      enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae eleifend lectus tempus sit amet.Donec ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi eget iaculis.
      Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus mauris in porttitor. Nullam non enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae eleifend lectus tempus sit amet.Donec ut arcu quis enim vehicula aliquam vel
      a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus mauris in porttitor. Nullam non enim eget ante malesuada pharetra. Curabitur
      semper dui quam, vitae eleifend lectus tempus sit amet.Donec ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium dictum venenatis.
      Nulla congue maximus mauris in porttitor. Nullam non enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae eleifend lectus tempus sit amet. Donec ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros eu molestie mattis.
      In at arcu nisi. Nam feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus mauris in porttitor. Nullam non enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae eleifend lectus tempus
      sit amet.Donec ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi eget iaculis. Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus mauris in porttitor.
      Nullam non enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae eleifend lectus tempus sit amet.Donec ut arcu quis enim vehicula aliquam vel a ligula. Nulla sagittis eros eu molestie mattis. In at arcu nisi. Nam feugiat posuere mi
      eget iaculis. Aliquam volutpat lectus pretium dictum venenatis. Nulla congue maximus mauris in porttitor. Nullam non enim eget ante malesuada pharetra. Curabitur semper dui quam, vitae eleifend lectus tempus sit amet. </p>
  </div>

</div>

div在滚动上删除类后滚动而不是隐藏

2 个答案: