如何在网站滚动时更改列表中的位置（<ul>）

Question

在我的网站上，我将垂直未排序的列表作为点。点击<li>后，网页滚动到足够的锚点，但是当网站滚动时，例如轮子没有移动点。如何解决这个问题？

Answer 1

你必须重新思考你的逻辑，以便将每个子弹标记为＆＃34;活跃＆＃34;。收听scroll事件并确定哪个标题最接近当前视口 - 将其标记为active。

例如：

$(window).on('scroll', function(e){
    var scrollPosition = window.pageYOffset;
    var $headlines = $('h1'); //assuming your headlines are h1-tags

    // get the closest headline
    var closestIndex,
        closestOffset=null;
    for (var i=0; i<$headlines.length; i++){
        if (closestOffset===null || Math.abs(scrollPosition-$($headlines[i]).offset().top) < closestOffset){
            closestIndex=i;
        }
    }

    // mark as active
    if (!$headlines[closestIndex].classList.contains('active'))
        $headlines[closestIndex].classList.add('active');
});

未测试。只是POC。您可能希望将window.offsetHeight/2添加到scrollPosition - 这是当前视口的中心。