Question

大家好，我正在尝试显示我网站的进度条，但是我面临着无法滚动显示background-color的问题，请为此提供帮助，并从html开始在下面找到代码， css和jquery ...

HTML代码

<div class="progress-bar-container"><div id="progressbar" value="0"></div></div>

CSS代码

    height: 5px;
    background-color: #ced4da;
    overflow: hidden;
    width: 100%;
    position: sticky;
    position: -webkit-sticky;
    top: 48px;
    z-index: 440;
}
.progress-bar-container #progressbar {
    background-color: #4688f1;
    height: 100%;
    width: 0;
}

jQuery代码

      $(window).scroll(function () {
          var s = $(document).scrollTop(),
              d = $(document).height() - $(window).height();
          $("#progressbar").attr('max', d);
          $("#progressbar").attr('value', s);
       });
   });

请在此指导我如何在滚动条上显示背景色。在此先感谢！

Answer 1

您的代码有两个问题，HTML width属性不支持div元素。另外，div也不支持value属性。为了创建进度条，您可以使用CSS。无需更新$("#progressbar").attr('value', s);的值，只需更新元素$("#progressbar").width(s);的宽度

这是完整的工作示例-

  $(window).scroll(function () {
          var s = $(document).scrollTop(),
              d = $(document).height() - $(window).height();
          $("#progressbar").width(s);
   });

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
.progress-bar-container{
    height: 5px;
    background-color: #ced4da;
    overflow: hidden;
    width: 100%;
    position: sticky;
    position: -webkit-sticky;
    top: 48px;
    z-index: 440;
}
.progress-bar-container #progressbar {
    background-color: #4688f1;
    height: 100%;
    width: 0;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="progress-bar-container"><div id="progressbar"></div></div>
<div style="height: 120vh"></div>
	
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

</body>
</html>

Answer 2

您应该计算百分比并将其设置为`progressbar``的宽度看看。

$(window).scroll(function () {
  var  d = $(document).height() - $(window).height(),
       s = $(document).scrollTop(); 
  var  width= (s / d) * 100 // in Procent
  $("#progressbar").attr('max', d);
  $("#progressbar").attr('value',s).css("width",width +"%");
});

body{
height: 1000px;
}

.progress-bar-container{ 
    height: 5px;
    background-color: #ced4da;
    overflow: hidden;
    width: 100%;
    position: sticky;
    position: -webkit-sticky;
    top: 48px;
    z-index: 440;
}
.progress-bar-container #progressbar {
    background-color: #4688f1;
    height: 100%;
    width: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress-bar-container">
<div id="progressbar" value="0"></div>
</div>

进度条背景颜色未显示在jQuery中

2 个答案: