div滚动而不是在滚动上删除类后隐藏 [英] div to scroll rather than hiding after removing class on scroll

问题描述

我有一个带有固定类的div，它在滚动时会消失.

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

如果有人可以建议/指出正确的方向，那将是很好的

笔: http://codepen.io/anon/pen/OpjZEL

 $(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> 

解决方案

问题是，当您删除类.fixed时，您不仅会删除position: fixed声明，而且还会 删除top和width声明.您只需要在删除类后将它们应用回.content即可.请注意，该元素默认为position: relative，因此top将不再起作用.因此，您需要改用margin-top:

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

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

我还创建了一个新的CodePen，在此此处展示.

>

希望这会有所帮助！ :)

编辑:

要使其恢复到用户向上滚动时的状态，只需使用else条件来撤消if条件进行的更改:

else if ($(document).scrollTop() <= 500) {
  $('.content').addClass('fixed');
  $('.content').css('margin-top', '0');
}

这是一个可行的示例:

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

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

我已经更新了笔以反映这一点，并且仍然可以在在此处找到.

请注意，您可能需要尝试使用550px值的margin-top值来获得真正平滑的过渡:)

希望这会有所帮助！ :)

I have a div with a fixed class which is removing fine on scroll.

I've been trying to get the div to continue scrolling after the fixed class has been removed but it keeps getting hidden rather than continuing scrolling

If anyone could advise / point me in the right direction that would be great

pen: http://codepen.io/anon/pen/OpjZEL

$(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>

解决方案

The problem is that when you remove class .fixed, you're not just removing the position: fixed declaration, you're also removing the top and width declarations. You simply need to apply these back to .content after removing the class. Note that the element defaults to position: relative, so top will no longer work. As such, you'll need to use margin-top instead:

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

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

I've also created a new CodePen showcasing this here.

Hope this helps! :)

EDIT:

In order to have it go back to how it was when the user scrolls back up, simply use an else condition to undo the changes made by the if condition:

else if ($(document).scrollTop() <= 500) {
  $('.content').addClass('fixed');
  $('.content').css('margin-top', '0');
}

Here's a working example:

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

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

I've update the pen to reflect this, and it can still be found here.

Note that you may need to play around with the margin-top value of 550px value in order to get a truly smooth transition :)

Hope this helps! :)

这篇关于div滚动而不是在滚动上删除类后隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！