Question

我正在尝试这样做，以便当我向下滚动页面时，我的导航栏固定在顶部，我尝试了很多不同的东西，我不确定我做错了什么。请参阅下面的导航代码。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!--Navigation-->
<nav class="navbar navbar-expand-md navbar-light bg-light navbar-fixed-top" id="navbar">
  <div class="container-fluid">
    <a class="navbar-brand" href="index.html"><img src="#"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
            <span class="navbar-toggler-icon"></span>
            </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="nav navbar-nav nav-pills ml-auto">
        <li class=nav-item active>
          <a class="nav-link" href="#home">Home</a>
        </li>
        <li class=nav-item>
          <a class="nav-link" href="#gallery">Gallery</a>
        </li>
        </li>
        <li class=nav-item>
          <a class="nav-link" href="#aboutme">About</a>
        </li>
        <li class=nav-item>
          <a class="nav-link" href="#contact">Contact</a>
        </li>
      </ul>
    </div>
</nav>

fromIterable()

Answer 1

.navbar {
  padding: .8rem;
}

.navbar-nav li {
  padding-right: 25px;
}

.nav-link {
  font-size: 1.1em;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!--Navigation-->
<nav class="navbar sticky-top navbar-expand-md navbar-light bg-light navbar-fixed-top" id="navbar">
  <div class="container-fluid">
    <a class="navbar-brand" href="index.html"><img src="#"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
            <span class="navbar-toggler-icon"></span>
            </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="nav navbar-nav nav-pills ml-auto">
        <li class=nav-item active>
          <a class="nav-link" href="#home">Home</a>
        </li>
        <li class=nav-item>
          <a class="nav-link" href="#gallery">Gallery</a>
        </li>
        </li>
        <li class=nav-item>
          <a class="nav-link" href="#aboutme">About</a>
        </li>
        <li class=nav-item>
          <a class="nav-link" href="#contact">Contact</a>
        </li>
      </ul>
    </div>
</nav>
<div style="height: 5000px; background-color: red; width: 500px;"></div>

导航栏可以添加类.sticky-top，以便轻松将其修复到页面顶部。 Support因此被广泛使用，但不包括Internet Explorer。作为替代方案，可以使用fixed-top，但如果没有额外的CSS补充，这可能会导致一些重叠问题。

包含一个纯红色div元素，以使页面足够大以滚动。

Answer 2

我现在开发了以下问题，这是我的完整HTML。

当我滚动时，当它到达文档中的某个点时，似乎丢失了工具栏？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Unique Portraits</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link href="styles.css" rel="stylesheet">  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css">
  </head>
  <body data-spy="scroll" data-target="#navbar" data-offset="50">

<!--Navigation-->
<nav class="navbar sticky-top navbar-expand-md navbar-light bg-light navbar-fixed-top" id="navbar">
  <div class="container-fluid">
    <a class="navbar-brand" href="index.html"><img src="#"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
            <span class="navbar-toggler-icon"></span>
            </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="nav navbar-nav nav-pills ml-auto">
        <li class=nav-item active>
          <a class="nav-link" href="#home">Home</a>
        </li>
        <li class=nav-item>
          <a class="nav-link" href="#gallery">Gallery</a>
        </li>
        </li>
        <li class=nav-item>
          <a class="nav-link" href="#aboutme">About</a>
        </li>
        <li class=nav-item>
          <a class="nav-link" href="#contact">Contact</a>
        </li>
      </ul>
    </div>
</nav>
<!-- Image SLider & Indicators -->
 <div id="slides" class="carousel slide" data-ride="carousel">
    <ul class="carousel-indicators">
      <li data-target="#slides" data-slide-to="0" class="active"></li>
      <li data-target="#slides" data-slide-to="1"></li>
      <li data-target="#slides" data-slide-to="2"></li>
    </ul>
  <div class="carousel-inner" id="home">
    <div class="carousel-item active">
      <img src="img/warm.jpg" >
    </div>
     <div class="carousel-item">
      <img src="img/landscape2.jpg">
    </div>
     <div class="carousel-item">
      <img src="img/river.jpeg">
    </div>
  </div>
  <div class="carousel-caption">
      <h1 class="display-2">ALIAS PHOTOGRAPHY</h1>
        <h3>My Journey Through Nature...</h3>
        <div class="showcase-buttons">
        <!-- <button type="button" class="btn btn-outline-light btn-lg mr-1">VIEW DEMO</button> -->
        <a href="#gallery"><button type="button" class="btn btn-primary btn-lg">VIEW GALLERY</button></a>
        </div>
      </div>

  <!-- Arrows -->
  <a class="carousel-control-prev" href="#slides" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next btn-lg" href="#slides" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  </div>

<!-- Jumbotron -->
<div class="container-fluid">
  <div class="row jumbotron">
    <div class="col-12 text-center">
      <p class="lead ml-5 mr-5">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has </p>
      <a href="#aboutme"><button type="button" class="btn btn-outline-secondary btn-lg text-center">Find out more</button></a> 
    </div>

  </div>
</div>

<!-- Gallery -->
<div class="container gallery" id="gallery">
  <div class="row">
    <div class="col-md-3 " id="cols">
      <a href="img/yellow.jpeg" data-toggle="lightbox" data-gallery="gallery"><img src="img/yellow.jpeg" class="img-fluid rounded"></a>
    </div>
     <div class="col-md-3 " id="cols">
      <a href="img/yellow.jpeg" data-toggle="lightbox" data-gallery="gallery"><img src="img/yellow.jpeg" class="img-fluid rounded"></a>
    </div>
     <div class="col-md-3 " id="cols">
      <a href="img/yellow.jpeg" data-toggle="lightbox" data-gallery="gallery"><img src="img/yellow.jpeg" class="img-fluid rounded"></a>
    </div>
     <div class="col-md-3 " id="cols">
      <a href="img/yellow.jpeg" data-toggle="lightbox" data-gallery="gallery"><img src="img/yellow.jpeg" class="img-fluid rounded"></a>
    </div>
  </div>
  <div class="row">
    <div class="col-md-3 " id="cols">
      <a href="img/yellow.jpeg" data-toggle="lightbox" data-gallery="gallery"><img src="img/yellow.jpeg" class="img-fluid rounded"></a>
    </div>
     <div class="col-md-3 " id="cols">
      <a href="img/yellow.jpeg" data-toggle="lightbox" data-gallery="gallery"><img src="img/yellow.jpeg" class="img-fluid rounded"></a>
    </div>
     <div class="col-md-3 " id="cols">
      <a href="img/yellow.jpeg" data-toggle="lightbox" data-gallery="gallery"><img src="img/yellow.jpeg" class="img-fluid rounded"></a>
    </div>
     <div class="col-md-3 " id="cols">
      <a href="img/yellow.jpeg" data-toggle="lightbox" data-gallery="gallery"><img src="img/yellow.jpeg" class="img-fluid rounded"></a>
    </div>
  </div>
</div>

<!-- About -->
<div class="container-fluid about" id="aboutme">
  <div class=row padding>
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-9 col-xl-9 text-light text-center ">
      <h2 class="display-3 mt-4">A bit about me</h2>
      <p class="lead ml-5 mr-5">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has</p>
      <a href="#contact"><button type="button" class="btn btn-outline-primary btn-lg m-1 mb-4">Why not get in touch?</button></a>
      <br>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 col-xl-3 aboutimg">
       <img src="img/landscapeold.jpeg">
    </div>  
  </div>
</div>

<!-- Connect -->
<div class="container-fluid">
<div class="row jumbotron text-center m-0">
  <div class="col-12">
    <h2 class="display-3">Connect</h1>
  </div>
<div class="col-12 social padding">
  <a href="https://www.facebook.com" target="_blank"><i class="fab fa-facebook"></i></a>
  <a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>
  <a href="https://plus.google.com/up/?continue=https://plus.google.com/people" target="_blank"><i class="fab fa-google-plus-g"></i></a>
  <a href="https://www.instagram.com" target="_blank"><i class="fab fa-instagram"></i></a>
  <a href="https://www.youtube.com/" target="_blank"><i class="fab fa-youtube"></i></a>
</div>
</div>  
</div>

<!-- Footer -->
<footer>
  <div class="container-fluid padding text-center" id="contact">
    <div class="row text-light pt-4">
      <div class="col-6 addresscol">
        <hr class="light">
        <div>
        <p><i class="fa fa-envelope mr-3 mt-3 icon offset-4"></i>email@emaildomain.com </p>
        <p><i class="fa fa-phone mr-3 icon offset-4"></i>+12 34567 891</p>
        <p><i class="fa fa-map-marker mr-4 icon offset-4"></i>123 Same Street</p>
          <div>
        <p><i class="offset-4 mr-5"></i>County</p>  
        <p><i class="offset-4 mr-5"></i>Town</p>  
        <p class="pml"><i class="offset-4 mr-5 mb-1"></i>Postcode</p>   
          </div>
        </div>        
        <a href="dummyresume.rtf"><button type="button" class="btn btn-outline-light btn-lg mt-4 offset-">Download Résumé</button></a>
      </div>


<!-- Start of Form -->
<div class="col-6">
  <h2 class="pb-3 align-centre display-4"><i class="fas fa-envelope mr-2"></i>
      Drop a Line
  </h2>
<div>
  <h4 class="display-5 formpadding">
      Dont hesitate to get in touch
  </h4>
</div>
<div data-form-type="form">
  <div class="row">
    <div class="col-md-6 formpadding">
       <input type="text" class="form-control input formfirst" name="name" data-form-field="Name" placeholder="Your Name">
    </div>
    <div class="col-md-6 formpadding">
        <input type="text" class="form-control input formphone" name="phone" data-form-field="Phone" placeholder="Phone">
    </div>
    <div class="col-md-12 formpadding" data-for="email">
        <input type="text" class="form-control input" name="email" data-form-field="Email" placeholder="Email">
    </div>
    <div class="col-md-12 formpadding" data-for="message">
        <textarea class="form-control input" name="message" rows="3" data-form-field="Message" placeholder="Message"></textarea>
    </div>
    <div class="input-group-btn col-md-12" style="margin-top: 10px;">
        <button href="" type="submit" class="btn btn-primary btn-form">SEND MESSAGE</button>
    </div>
  </div>
</form>
 </div>
</div> 

<!-- End of Form -->
</div>
</div>
</div>

<!-- Copyright -->
  <div class="container-fluid copyright">
  <hr class="bg-light">
      <p class="lead">&copy; domainname.com</p>
  </div>
</footer>

<!-- JavaScript's -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>
<script src="bootstrap-lightbox.js"></script>
</body>
</html>

固定Bootstrap Navbar不起作用

2 个答案: