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

Question

我的问题是增加里面div的宽度。

基本上，当用户滚动时，侧边栏（右侧）li会将范围（红色背景颜色）从0增加到100.换句话说，如果在视图中第一个对应的div，然后是相应的li元素＆＃39;当用户向下或向上滚动时， 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

你走了：

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功能后的所有内容即可。

Answer 2

类似的东西：

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

或jsfiddle：

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

第一个获得每个部分的高度

第2页滚动，检查每个部分的进度

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

$(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));
    }
  }
});