0

如您所见，我有许多垂直排列的点！向下滚动时它起作用，当一个滚动时，下一个点得到一个改变球样式的类，我希望当我向上滚动时发生完全相同的情况，但它不起作用！请任何输入表示赞赏！

这里有一个代码笔供您参考！

在 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>

4

2 回答 2

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>

于 2019-04-26T14:33:18.563 回答
0

你可以使用jQuery的轮子。

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

这将解决您关于检测滚动方向的问题。

于 2019-04-26T14:31:41.203 回答