滚动进度条以获取特定元素

Question

我有一个滚动进度条让用户知道帖子有多长。第一种方法是使用$（document）.height来计算整个站点的高度，并且它可以工作。

{{1}}

现在我试图让它只与特定的div一起工作，而不是整个网站滚动。我已尝试将 $（窗口）或 $（文档）替换为我的容器，但它不起作用。

在下一个演示中，您可以看到条形图正常工作以测量整个网站滚动进度，但我只想测量 scroll-progress-starts-here div的进度。任何帮助都会很棒。

Answer 1

将您的javascript更改为此

//capture scroll any percentage
$(window).scroll(function(){
var pos = $(".scroll-progress-begins-here").offset();
var wintop = $(window).scrollTop() - pos.top;
var dvHeight = $(".scroll-progress-begins-here").height();
var scrolled = (wintop/(dvHeight))*100;

$('.scroll-line').css('width', (scrolled + '%'));
});

Answer 2

尝试使用此代码在特定div处插入滚动条

{{1}}

Answer 3

使用pace js库进度条

http://github.hubspot.com/pace/docs/welcome/

这是在我们的网站上实施进度条的最佳方式

Answer 4

＆＃13;

＆＃13;

self.frame.pack(fill='x') # which is the same as self.frame.pack(fill=X)

＆＃13;

//capture scroll any percentage
$(window).scroll(function(){
var wintop = $(window).scrollTop();
var docheight = $(document).height(); 
var winheight = $(window).height();
var scrolled = (wintop/(docheight-winheight))*100;
  
$('.scroll-line').css('width', (scrolled + '%'));
});

＆＃13;

body{
  overflow:hidden;
}
header{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #ccc;

}
.header-proper{
  width: 80%;
    overflow:hidden;
  margin: 0 auto;
  .logo{
    font-family: "HelveticaNeueBlack", "HelveticaNeue-Black", "Helvetica Neue Black", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif; 
    font-weight:bold; 
    .blue{
      color: blue;
    }
    
  }
}
.scroll-line{
  height: 2px;
  margin-bottom: -2px;
  background: blue;
  width: 0%;
}
.main{
    overflow:auto;
  height:75vh;
  position:absolute;
  top:80px;
}
.content{
  padding: 100px 0;
  margin: 0 auto;
  
  width: 80%;
}
.headline{
  font-size: 60px;
  line-height: 66px;
}

.scroll-progress-begins-here {
  background-color: rgba(245,166,35,0.50);
}

＆＃13;

＆＃13;

＆＃13;

你的问题解决了吗？