一步一步滚动
一步一步滚动
提问于 2018-10-08 00:52:10
我已经创建了一个具有不同背景颜色的滚动容器，这些颜色在滚动时是fadeIn和fadeOut。但我想要一步一步地滚动，例如，当我滚动到第二张图片时，它可能会停止，然后当再次滚动到第三张图片时(如fullpagejs)。我看过其他的帖子，但我真的不知道我该怎么做。请帮帮我..
$(document).scroll(function(event) {
event.preventDefault();
var y = $(this).scrollTop();
if (y >= 100) {
$('#section2').fadeIn('slow');
} else {
$('#section2').fadeOut('slow');
};
if (y >= 200) {
$('#section3').fadeIn('slow');
} else {
$('#section3').fadeOut('slow');
};
if (y >= 300) {
$('#section4').fadeIn('slow');
} else {
$('#section4').fadeOut('slow');
};
});body {
box-sizing: border-box;
background-color:red;
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
height: 738px;
width: 50%;
margin-top: 0px;
margin-bottom: 1000px;
}
.slider_sections {
width:100%;
height:100%;
display:none;
position:fixed;
z-index:-1;
}
#section2{
background-color: #777;
}
#section3{
background-color: #eee;
}
#section4{
background-color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<div class="slider_sections" id="section1">
<h1>1</h1>
</div>
<div class="slider_sections" id="section2">
<h1>2</h1>
</div>
<div class="slider_sections" id="section3">
<h1>3</h1>
</div>
<div class="slider_sections" id="section4">
<h1>4</h1>
</div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-08 00:59:44
因此，对于您的问题，我将所有内容都放到代码片段中，并调用jQuery库，因为它是运行您的代码所缺少的。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>最后一件事，即使现在一切正常，请关闭你的最后一个</div>标签。如下所示。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<div class="slider_sections" id="section1">
<h1>1</h1>
</div>
<div class="slider_sections" id="section2">
<h1>2</h1>
</div>
<div class="slider_sections" id="section3">
<h1>3</h1>
</div>
<div class="slider_sections" id="section4">
<h1>4</h1>
</div>
</div> <!-- <---- There -->页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52690754
复制相关文章
相似问题
腾讯云开发者
