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屋!