Question

我正在尝试根据页面滚动的距离向我的每个LI元素添加一个类。

如果我的视口为2000px高，则第一个li应该添加类＆＃34; .active＆＃34;在500px之后。然后在另一个500px向下滚动后，第二个LI应该应用了类＆＃34; active＆＃34;以前的LI应该已经删除了类等等。

JavaScript应根据视口的高度计算像素，因为我并不总是知道页面的高度。

我知道有可能使用jquery和一些（每个），但我不知道如何以及从何处开始。任何帮助深表感谢。： - ）

＆＃13;

.wrapper {
min-height: 2000px;
}
.header {
position: fixed;
width: 100%;
background: #eee;
right: 0;
left: 0;
top: 0;
}
ul {
position: relative;
list-style: none;
height: 35px;
margin: 0;
padding: 0;
}
li {
position: absolute;
visibility: hidden;
opacity: 0;
transition: all .2s ease;
transform: translateY(100%);
line-height: 35px;
margin: 0;
padding: 0 20px;
}
li.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
}

＆＃13;

<div class="wrapper">
  <div class="header">
    <ul class="list">
      <li>I wil lbe visible after a threshold of 500px</li>
      <li class="active">I should be visible when user has scrolled (pageheight - 500px / 4)</li>
      <li>I should be visible when user has scrolled (pageheight - 500px / 4) * 2 </li>
      <li>I should be visible when user has scrolled (pageheight - 500px / 4) * 3 </li>
    </ul>
  </div>
</div>

＆＃13;

我做了一个小例子来演示标记： https://jsfiddle.net/a1hq5tg3/2/

Answer 1

您可以使用本机浏览器事件检查当前滚动位置以更新所需的＆＃34; li＆＃34;基于滚动范围

window.onscroll = function(args) {
   console.log(document.body.scrollTop);

   if(document.body.scrollTop > 200 && document.body.scrollTop < 300) {
      document.getElementsByClassName('active')[0].className.replace('active', '');
      document.getElementsByTagName('li')[next].className += ' active';
   }
};

Answer 2

我的答案是@VadimB和我的评论/答案的结果。

$(window).on('scroll', function() {

  var windowSize = $(window).scrollTop(),
    documentSize = $(document).height() - $(window).height();

  $('li').removeClass('hello');

  if (windowSize < (documentSize) * 0.25) {
    $('li').removeClass('hello');
  } else if (windowSize < (documentSize) * 0.50) {
    $('li:nth-child(2)').addClass('hello');
  } else if (windowSize < (documentSize) * 0.75) {
    $('li:nth-child(3)').addClass('hello');
  } else if (windowSize > (documentSize) * 0.75) {
    $('li:nth-child(4)').addClass('hello');
  }

});

小提琴：https://jsfiddle.net/randomobject/43sspmL5/

如何根据窗口高度在滚动上显示单个li元素

2 个答案: