进度条充当导航栏上的边框底部答案

【问题标题】：Progress bar acting as border bottom on a Navbar进度条充当导航栏上的边框底部
【发布时间】：2018-12-22 04:42:07
【问题描述】：

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

我有一个想法 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>

【问题讨论】：

标签： javascript html css bootstrap-4

【解决方案1】：

您可以将进度条的位置固定并偏移导航栏的高度（或任意大小）：

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

【讨论】：

【解决方案2】：

如果你想把它放在底部，但把它放在蓝色的导航栏中添加

position: absolute; bottom: 0;

致.progress-container。

如果你希望它是进度容器的全宽，你可以添加

left: 0; right: 0;

也发送至.progress-container。

最后，如果您希望它位于蓝色导航栏下方，您可以添加否定的bottom: -8px; 而不是0。 -8px 的原因是进度条的高度。

【讨论】：

【解决方案3】：

添加..

position: absolute;
bottom: -8px;

到

.progress-container

我认为应该可以。

【讨论】：