如何在侧边栏中创建进度条？

Question

我的问题是关于增加 li 内 div 的宽度。

基本上，当用户滚动时，侧边栏（右侧）li 会将 span（红色背景色）从 0 增加到 100。换句话说，如果第一个对应的 div 在视图中，然后对应的 li 元素的 span 将随着用户向下或向上滚动而从 0 增加到 100%。这将指示用户滚动了多少 div。

我有一个示例代码笔，它显示了我正在尝试做的事情 https://codepen.io/hellouniverse/pen/xdVJQp

我的 CSS 看起来像

.sidebar {
position: fixed;
max-width: 300px;
&__list {
    position: relative;
    text-align: center;
    padding: 10px;
    margin: 10px auto;
    border: 2px solid #f3f2f0;
    list-style-type: none;
    display: inline-flex;
    flex-direction: column;
}
// The primary red bar at the bottom that increases in width with scroll
span {
    background-color: red;
    height: 5px;
}

}

问题出在js中 在 JS 中，我猜 1.需要计算对应div的高度 2.根据1计算的高度，按一定比例增加跨度。

我似乎根本无法弄清楚代码。有人可以帮忙吗？

// Checks whether an elem gets into view of the window
function isScrolledIntoView(elem) {
    'use strict';
    if (elem.length > 0) {
        var docViewTop = jQuery(window).scrollTop();
        var docViewBottom = docViewTop + jQuery(window).height();
        var elemTop = jQuery(elem).offset().top;
        return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
    }
}

var lastScrollTop = 0;

$(window).scroll(function() {

    // Increase & Decrease width of the span of li as you scroll

        var height = $('section-just-in').height();
        var incrementBy = 300 / height;


        $('.sidebar__list span').animate({
            // increase width from 0 till 100%
            width : width + incrementBy
        });

})

Answer 1

类似这样的：

https://codepen.io/hdl881127/pen/ZKOaBY

或这里的jsfiddle：

https://jsfiddle.net/dalinhuang/Lw72csjd/

第一次获取每个部分的高度

第二次滚动，检查每个部分的进度

最后将进度条应用到每个按钮。

$(document).ready(function() {
  var theone = $('#section-just-in');
  var thetwo = $('#videos');
  var thethree = $('#aboutteam');
  var theone_h, thetwo_h, thethree_h;

  theone_h = theone.innerHeight();
  thetwo_h = thetwo.innerHeight();
    // remove the window height cus
    // we are not able to full scroll down when we hit the bottom of the page
  thethree_h = thethree.innerHeight() - $(window).height();

  $(document).scroll(function() {
    var page_height = $("body").scrollTop();

    var pos_2 = page_height > theone_h ? page_height - theone_h : 0;
    var pos_3 = page_height > (thetwo_h+theone_h) ? (page_height - (+thetwo_h + +theone_h)) : 0;
    var progress_1 = (page_height / theone_h) >= 1 ? 100 : (page_height / theone_h) * 100;
    var progress_2 = (pos_2 / thetwo_h) >= 1 ? 100 : (pos_2 / thetwo_h) * 100;
    var progress_3 = ((pos_3) / thethree_h) >= 1 ? 100 : ((pos_3) / thethree_h) * 100;

    $("ul li:nth-child(1) span").stop().animate({
      "width": progress_1 + '%'
    }, 0);
    $("ul li:nth-child(2) span").stop().animate({
      "width": progress_2 + '%'
    }, 0);
    $("ul li:nth-child(3) span").stop().animate({
      "width": progress_3 + '%'
    }, 0);
  });




  // Checks whether an elem gets into view of the window
  function isScrolledIntoView(elem) {
    'use strict';
    if (elem.length > 0) {
      var docViewTop = jQuery(window).scrollTop();
      var docViewBottom = docViewTop + jQuery(window).height();
      var elemTop = jQuery(elem).offset().top;
      return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
    }
  }
});

Answer 2

给你：

var height,
    incrementBy,
    visible_height;

$(document).ready(function(){
    visible_height = $('.section-just-in').innerHeight(); 
});

$(document).scroll(function() {
    var scroll_top = Math.max( $("html").scrollTop(), $("body").scrollTop());

    incrementBy = (100 * scroll_top) / visible_height / 1.4;

    $('.sidebar__list span').stop().animate({
        "width" : incrementBy
    });
});

只需替换 isScrolledIntoView 函数之后的所有内容，它应该可以工作。