Question

我一直试图制作一个进度条，当滚动页面时该进度条会移动。我目前在酒吧摆放位置方面遇到问题。我希望它位于border-bottom-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>

Answer 1

如果要在底部，但将其保留在蓝色导航栏中，请添加

\10

致position: absolute; bottom: 0;。

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

.progress-container

也

到left: 0; right: 0;。

最后，如果您希望它位于蓝色导航栏的正下方，则可以添加一个负数.progress-container而不是bottom: -8px;。 0的原因是进度条的高度。

Answer 2

您可以固定进度条的位置，并偏移导航条的高度（或任意多）：

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

Answer 3

添加..

position: absolute;
bottom: -8px;

到

.progress-container

我认为应该起作用。

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

3 个答案: