onScroll通过在屏幕上可见将类添加到div

Question

我在为网站制作时间轴并滚动，我需要将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");
    });

    }
});

Answer 1

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

您需要通过节类遍历每个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");
  }
  });
});

的jsfiddle