时间戳

首页 > 解决方案 > 进度条充当导航栏上的边框底部

javascript - 进度条充当导航栏上的边框底部

问题描述

我一直在尝试制作一个在页面滚动时移动的进度条。我目前对我的酒吧的位置感到困惑。我希望它处于与边界底部相同的位置。

我有一个想法 navbar::after 可能是一个解决方案，但这也没有用。

实时代码如下。

谢谢 

// When the user scrolls the page, execute myFunction 
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 + "%";
}
/* The progress container (grey background) */
.progress-container {
  width: 100%;
  height: 8px;
  background: #0E112B;
}

/* The progress bar (scroll indicator) */
.progress-bar {
  height: 8px;
  background: #f12545;
  width: 0%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
 
    <nav class="navbar fixed-top navbar-dark bg-primary navbar-expand-lg">
        <img class="navbar-brand" style="max-width:150px;" src="../img/some-logo.svg">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
        <div class="collapse navbar-collapse" id="navbarText">
        </div>
        
        
        <div class="progress-container">
    <div class="progress-bar" id="myBar">
    </div>
    </div>         
    </nav>
  <p style="margin-top:50px; margin-bottom:2000px;">Text to scroll to make bar work</p> 

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

标签： javascripthtmlcssbootstrap-4

解决方案

您可以使进度条的位置固定并偏移导航栏的高度（或尽可能多）：

.progress-container {
  position: fixed;
  top: 0px; /* Adjust to desired height */
  width: 100%;
  background: #0E112B;
}

推荐阅读