上下滾動將類添加到div

Question

如您所見，我有許多垂直排列的點！ 在向下滾動時，它起作用了，當向下滾動一個點時，它得到了一個改變球樣式的類，我希望在向上滾動時發生完全相同的操作，但它不起作用！ 請任何輸入表示贊賞！

這是一支電筆供您參考！

在html，css和javascript下面：

 var activeMilestone = function() { var milestoneBalls = $('.dot'); milestoneBalls[0].classList.add("active"); window.onscroll = function() { milestoneBalls.each(function(i, v) { var thisBall = $(this); var nextBall = milestoneBalls[i + 1]; var prevBall = milestoneBalls[i - 1]; var thisPositionTop = thisBall.offset().top + ($(this).parent().height() / 3); var winScroll = window.scrollY; if (thisPositionTop <= winScroll) { nextBall.classList.add("active"); thisBall.addClass("inactive"); } if (thisPositionTop >= winScroll) { //this.classList.add("inactive_ball"); } }); } } $(document).ready(activeMilestone); 

 .wrapper { height: 1000px; background-color: wheat; } .info_wrapper { margin-top: 70px; } .container { height: 50%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .dot { width: 30px; height: 30px; border-radius: 20px; background-color: maroon; border: solid 4px green; } .active { border: solid 4px yellow; background-color: red; } .inactive { background-color: maroon; border: solid 4px green; } .text {} .header { width: 100%; height: 50px; background-color: lightblue; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <div class="header"></div> <div class="container"> <div class="info_wrapper"> <div class="text"></div> <div class="dot "></div> </div> <div class="info_wrapper"> <div class="text"></div> <div class="dot "></div> </div> <div class="info_wrapper"> <div class="text"></div> <div class="dot "></div> </div> <div class="info_wrapper"> <div class="text"></div> <div class="dot"></div> </div> <div class="info_wrapper"> <div class="text"></div> <div class="dot"></div> </div> <div class="info_wrapper"> <div class="text"></div> <div class="dot"></div> </div> <div class="info_wrapper"> <div class="text"></div> <div class="dot"></div> </div> <div class="info_wrapper"> <div class="text"></div> <div class="dot"></div> </div> </div> </div> 

Answer 1

因此，此邏輯執行的操作與您已經執行的操作相同。 使用的附加邏輯，如果該元素不應該前進，並且我們不是第一個元素，則檢查是否應激活前一個球。 如果是這樣，我們將其激活。

 var activeMilestone = function() { var milestoneBalls = $('.dot'); milestoneBalls.eq(0).addClass('active'); window.addEventListener('scroll', function() { var activeBall = milestoneBalls.filter('.active'); var activeBallIndex = milestoneBalls.index( activeBall ); var activeBallPositionTop = activeBall.offset().top + (activeBall.parent().height() / 3); if (activeBallPositionTop <= window.scrollY) { activeBall.removeClass('active'); milestoneBalls.eq( activeBallIndex + 1).addClass('active'); } else if ( activeBallIndex ) { var previousBall = milestoneBalls.eq( activeBallIndex - 1 ); var previousBallPositionTop = previousBall.offset().top + (previousBall.parent().height() / 3); if (previousBallPositionTop > window.scrollY) { activeBall.removeClass('active'); previousBall.addClass('active'); } } }); } $(document).ready(activeMilestone); 

 .wrapper { height: 1000px; background-color: wheat; } .info_wrapper { margin-top: 70px; } .container { height: 50%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .dot { width: 30px; height: 30px; border-radius: 20px; background-color: maroon; border: solid 4px green; } .active { border: solid 4px yellow; background-color: red; } .inactive { background-color: maroon; border: solid 4px green; } .text {} .header { width: 100%; height: 50px; background-color: lightblue; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <div class="header"></div> <div class="container"> <div class="info_wrapper"> <div class="text"></div> <div class="dot "></div> </div> <div class="info_wrapper"> <div class="text"></div> <div class="dot "></div> </div> <div class="info_wrapper"> <div class="text"></div> <div class="dot "></div> </div> <div class="info_wrapper"> <div class="text"></div> <div class="dot"></div> </div> <div class="info_wrapper"> <div class="text"></div> <div class="dot"></div> </div> <div class="info_wrapper"> <div class="text"></div> <div class="dot"></div> </div> <div class="info_wrapper"> <div class="text"></div> <div class="dot"></div> </div> <div class="info_wrapper"> <div class="text"></div> <div class="dot"></div> </div> </div> </div> 

Answer 2

您可以在 jQuery 上使用轉輪 。

$(window).on('wheel',function(e) {
  var mov = e.originalEvent.deltaY;
  if(mov > 0) {
    alert("up");
  }else {
    alert("down");
  }
});

這樣可以解決有關滾動方向檢測的問題。