我正在制作网站的时间表,在滚动时,我需要addClass
到窗口可见的部分。我的jQuery适用于所有在屏幕上都看不到的div或部分。
您可以在 JSFiddle
上对其进行测试我的jQuery
$(window).on('load scroll', function() {
var $elem = $('#timeline .section');
var $window = $(window);
var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + 20 + $window.height();
var elemTop = $elem.offset().top;
var elemBottom = elemTop + $elem.height();
if (elemTop < docViewBottom) {
$("#timeline .section").each(function(i) {
$(this).delay(300 * i).addClass("active");
});
}
});
答案 0 :(得分:2)
$(window).on('load scroll', function() {
var $e = $('#timeline .section');
$e.removeClass("active")
$e.each(function(index){
var $window = $(window);
var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + 20 + $window.height();
var elemTop = $e.eq(index).offset().top;
var elemBottom = elemTop + $e.eq(index).height();
if (elemTop > docViewTop && elemBottom < docViewBottom){
$e.eq(index).addClass("active");
}
});
});
#timeline{
max-width: 620px;
margin: 40px auto 20px;
}
#timeline .section{
position: relative;
}
#timeline .section .year{
text-align: center;
padding: 30px 0 10px 0;
font-size: 18px;
font-weight: 300;
transition: 1s ease-in-out;
}
#timeline .section .year:after{
content: "";
opacity: 0;
width: 9px;
height: 9px;
background: #006699;
border-radius: 100%;
position: absolute;
margin: auto;
bottom: 0;
left: 0;
right: 0;
transition:1s ease-in-out;
}
#timeline .section .text-sec{
position: absolute;
font-weight: 100;
line-height: 24px;
right: 0;
bottom: 40px;
transition: 1s ease-in-out;
}
#timeline .section .sec-left{
max-width: 275px;
text-align: right;
float: left;
position: absolute;
left: 0;
top: 100px;
padding: 0 0 0 0;
}
#timeline .section .line{
background: #dedede;
width: 1px;
height:200px;
position: relative;
margin: 0 auto;
transition: 1s ease-in-out;
}
#timeline .section .sec-right{
max-width: 265px;
float: right;
}
#timeline .section.active .year{
color: #333333;
}
#timeline .section.active .year:after{
opacity: 1;
}
#timeline .section.active .text-sec{
color: #333333;
}
#timeline .section.active .sec-left{}
#timeline .section.active .line{
background: #006699;
}
#timeline .section.active .sec-right{}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="timeline">
<div class="section">
<div class="year">2014</div>
<div class="text-sec sec-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a porta erat. Vestibulum commodo neque in iaculis lobortis. Nullam sit amet placerat sapien. </div>
<div class="line"></div>
<div class="text-sec sec-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a porta erat. Vestibulum commodo neque in iaculis lobortis. Nullam sit amet placerat sapien. Pellentesque sollicitudin, nulla quis efficitur feugiat, augue tortor scelerisque urna, sit amet ultricies lectus</div>
</div>
<div class="section">
<div class="year">2015</div>
<div class="text-sec sec-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a porta erat. Vestibulum commodo neque in iaculis lobortis. Nullam sit amet placerat sapien. Pellentesque sollicitudin, nulla quis </div>
<div class="line"></div>
<div class="text-sec sec-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a porta erat. Vestibulum commodo neque in iaculis lobortis.</div>
</div>
<div class="section">
<div class="text-sec sec-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a porta erat. Vestibulum commodo neque in iaculis lobortis. Nullam sit amet placerat sapien. Pellentesque sollicitudin, nulla quis efficitur feugiat, augue torto</div>
<div class="line"></div>
<div class="text-sec sec-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a porta erat. Vestibulum commodo neque in iaculis lobortis. Nullam sit amet placerat sapien. Pellentesque sollicitudin, nulla quis.</div>
</div>
<div class="section">
<div class="year">2016</div>
<div class="text-sec sec-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a porta erat. Vestibulum commodo neque in iaculis lobortis. Nullam sit amet placerat sapien. Pellentesque sollicitudin, nulla quis efficitur feugiat, augue</div>
<div class="line"></div>
<div class="text-sec sec-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a porta erat. Vestibulum commodo neque in iaculis lobortis. Nullam sit amet placerat sapien. Pellentesque</div>
</div>
<div class="section">
<div class="text-sec sec-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a porta erat. Vestibulum commodo neque in iaculis lobortis. Nullam sit amet placerat sapien. Pellentesque sollicitudin, nulla quis efficitur feugiat</div>
<div class="line"></div>
<div class="text-sec sec-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit..</div>
<div class="year">Now</div>
</div>
</div>
你需要使用section class遍历每个div。
$(window).on('load scroll', function() {
var $e = $('#timeline .section');
$e.removeClass("active")
console.log($e)
$e.each(function(index){
var $window = $(window);
var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + 20 + $window.height();
var elemTop = $e.eq(index).offset().top;
var elemBottom = elemTop + $e.eq(index).height();
if (elemTop > docViewTop && elemBottom < docViewBottom){
$e.eq(index).addClass("active");
}
});
});