Question

我想重新创建在here上找到的滚动效果：滚动时，橙色条开始在屏幕顶部延伸，如果您向上滚动到顶部，它将向后移动在另一个方向上。

任何人都可以帮助我入门吗？

Answer 1

我相信您正在寻找滚动指示器。您可以按照本教程进行操作。

https://www.w3schools.com/howto/howto_js_scroll_indicator.asp

您需要以下html，css和js。这将在顶部添加进度条，以显示页面已滚动了多少。

代码：

window.onscroll = function() {
  myFunction()
};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}

.header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: #f1f1f1;
}


/* The progress container (grey background) */

.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;
}


/* The progress bar (scroll indicator) */

.progress-bar {
  height: 8px;
  background: #4caf50;
  width: 0%;
}

<div class="header">
  <h2>Scroll Indicator</h2>
  <div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
  </div>
</div>
<div> More content .. </div>

Answer 2

您可以创建由2个div元素组成的进度条。
内部div将代表滚动条的值。该值将通过滚动事件侦听器进行计算，并在每次滚动条更改后重置为DOM。

这是我的建议：

LIVE DEMO

HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!--remove comment to use jquery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <style>
    </style>
  </head>
  <body>
    <div class="progress-bar">
      <div id="pb-value">
      </div>
    </div>
    <div class="content">    
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Quisque rutrum urna turpis, nec auctor massa scelerisque quis.
        Donec auctor erat eget ultrices luctus.
        Mauris varius, ...
      </p>
    </div>
  </body>
</html>

CSS：

body
{
  margin:0;
}
.progress-bar
{
  position:fixed;
  display:inline-block;
  height:15px;
  width:100%;
  background-color:gray;
  z-index:999;
}
#pb-value
{
  float:left;
  display:inline-block;
  width:0;
  background-color:orange;
  height:100%;
}
.content
{
  position:absolute;
  top:10px;
}

JS：

window.addEventListener("scroll", scrollAnim);
function scrollAnim () {
  var val = getScrollPercent();
  document.getElementById('pb-value').style.width = val + "%";
}
function getScrollPercent()
{
  var maxvalue = $(document).height() - $(window).height();
  var val = $(document).scrollTop()
  return (val / maxvalue)*100;
}

滚动上栏动画

2 个答案: