如何使我的导航栏粘在页面顶部？

时间：2019-03-18 12:57:14

标签： html5 css3

试图使用一些不同的方法，但是什么也没有发生。这是我的代码，向下滚动时如何使其粘在页面顶部？

当我尝试操作时，导航位于照片和页面上文字的后面。有人可以帮助我吗？

<!-- Header start -->
<header>
        <div class="menu-area" id="">
            <div class="container">
                <div class="row">
                    <div class="col-md-3">
                        <div class="logo">
                            <!--== change the logo name ==-->
                            <a href="index.html">
                               <h3><span>CHRISTIAAN</span>DESMET</h3>
                            </a>
                        </div>
                        <!-- Responsive Menu Start -->
                        <div class="responsive-menu"></div>
                        <!-- Responsive Menu End -->
                    </div>
                    <div class="col-md-9 col-sm-12">
                        <div class="mainmenu">
                            <nav>
                                <ul id="navigation">
                                    <li class="current-page-item"><a href="#home">home</a>
                                    </li>
                                    <li>
                                        <a href="#overmij">
                                        over mij
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#producten">producten</a>
                                    </li>
                                    <li><a href="contact.html">contact</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</header>
<!-- Header End -->

3 个答案:

答案 0 :(得分：0)

HTML： 

<div id="navbar">
<!-- navbar content Here -->
</div>

CSS： 

#navbar {
  overflow: hidden;
  background-color: #333;
}

/* when navbar reaches top this should be added using JS*/
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}

JS： 

// When the user scrolls the page, execute myFunction 
window.onscroll = function() {myFunction()};

// Get the navbar
var navbar = document.getElementById("navbar");

// Get the offset position of the navbar
var sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

答案 1 :(得分：0)

只需添加类名并根据您的要求进行更改

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;  
}

答案 2 :(得分：0)

似乎您也在使用 Bootstrap ；您想要的东西真的很简单；您只需将sticky-top类添加到导航栏中，就可以了，请看这里：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<p>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde illum voluptatibus, laborum porro quibusdam officiis cum repudiandae iusto neque, consequatur consectetur error beatae maiores eaque ratione qui temporibus iste quisquam modi minima doloremque
  iure. Cumque et labore incidunt alias enim magnam cum nam id ullam, modi nisi eos illo eaque amet hic eum ea natus consequatur necessitatibus! Asperiores, quaerat perspiciatis quibusdam laudantium sunt illo libero ex aspernatur dolores explicabo rem
  architecto eos ipsa temporibus repudiandae itaque fugiat tempore ducimus ad eligendi reiciendis commodi. Molestiae ea necessitatibus in dolorum inventore vero et rerum dolore similique, dolores porro adipisci facilis, blanditiis obcaecati cumque, quisquam
  voluptatibus nisi magni doloribus rem voluptatem explicabo quis accusantium quibusdam! At quo laudantium ad id eaque ex voluptas illum? Id, beatae. Ducimus, quam assumenda? Dignissimos ad iusto accusamus obcaecati, laudantium blanditiis nam non in repellat
  iste repellendus suscipit magni est sapiente vero dolorem deserunt velit veritatis eius inventore?
</p>

<nav class="navbar navbar-expand sticky-top navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<p>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde illum voluptatibus, laborum porro quibusdam officiis cum repudiandae iusto neque, consequatur consectetur error beatae maiores eaque ratione qui temporibus iste quisquam modi minima doloremque
  iure. Cumque et labore incidunt alias enim magnam cum nam id ullam, modi nisi eos illo eaque amet hic eum ea natus consequatur necessitatibus! Asperiores, quaerat perspiciatis quibusdam laudantium sunt illo libero ex aspernatur dolores explicabo rem
  architecto eos ipsa temporibus repudiandae itaque fugiat tempore ducimus ad eligendi reiciendis commodi. Molestiae ea necessitatibus in dolorum inventore vero et rerum dolore similique, dolores porro adipisci facilis, blanditiis obcaecati cumque, quisquam
  voluptatibus nisi magni doloribus rem voluptatem explicabo quis accusantium quibusdam! At quo laudantium ad id eaque ex voluptas illum? Id, beatae. Ducimus, quam assumenda? Dignissimos ad iusto accusamus obcaecati, laudantium blanditiis nam non in repellat
  iste repellendus suscipit magni est sapiente vero dolorem deserunt velit veritatis eius inventore?
</p>

<p>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde illum voluptatibus, laborum porro quibusdam officiis cum repudiandae iusto neque, consequatur consectetur error beatae maiores eaque ratione qui temporibus iste quisquam modi minima doloremque
  iure. Cumque et labore incidunt alias enim magnam cum nam id ullam, modi nisi eos illo eaque amet hic eum ea natus consequatur necessitatibus! Asperiores, quaerat perspiciatis quibusdam laudantium sunt illo libero ex aspernatur dolores explicabo rem
  architecto eos ipsa temporibus repudiandae itaque fugiat tempore ducimus ad eligendi reiciendis commodi. Molestiae ea necessitatibus in dolorum inventore vero et rerum dolore similique, dolores porro adipisci facilis, blanditiis obcaecati cumque, quisquam
  voluptatibus nisi magni doloribus rem voluptatem explicabo quis accusantium quibusdam! At quo laudantium ad id eaque ex voluptas illum? Id, beatae. Ducimus, quam assumenda? Dignissimos ad iusto accusamus obcaecati, laudantium blanditiis nam non in repellat
  iste repellendus suscipit magni est sapiente vero dolorem deserunt velit veritatis eius inventore?
</p>

相关问题
最新问题