使用css滚动时,使导航栏粘在顶部

Question

我试图使我的导航栏随页面移动,但如果用户向下滚动则粘在顶部.任何人都可以提供任何示例或如何？非常感激.(我对任何其他语言都没有希望).我尝试使用css粘性但它没有用.

<div class="headercss">
    <div class="headerlogo"></div>
    <div class="nav">
        <ul>
            <li><a href="#home"> <br>BLINK</a></li>
            <li><a href="#news"><br>ADVERTISING WITH BLINK</a></li>
            <li><a href="#contact"><br>EDUCATING WITH BLINK</a></li>
            <li><a href="#about"><br>ABOUT US</a></li>
        </ul>
    </div>
</div>

 

/* www..com
Blinx Service
Created by Pierre Chedraoui
(c) Copyright 2015
*/

/* BODY */

body {
    margin: 0px;
    background-color: #000000;
    height: 2000px;
}


/* 1. HEADER */

.headercss {
    width: auto;
    height: 320px;
    background-color: #000000;
    position: relative;
}

.headerlogo {
    width: auto;
    height: 250px;
    background-color: #272727;
    position: relative;
}

.nav {
    width: auto;
    height: 70px;
    background-color: #272727;
    position: relative;
    overflow: hidden;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float:left;
    width:100%;
    overflow: hidden;
}


li {
    float: left;
    width:25%;
    min-width: 243px;
    overflow: hidden;
}

a:link, a:visited {
    display: block;
    height: 68px;
    min-width: 243px;
    font-size: 12px;
    color: #FFFFFF;
    border-right: 1px solid #000000;
    border-top: 1px solid #000000;
    background-color: #272727;
    text-align: center;
    text-decoration: none;
    font-family: 'Raleway', Arial;
    letter-spacing: 2pt;
    line-height: 200%;
    overflow: hidden;
}

a:hover, a:active {
    background-color: #242424;
}

Answer 1

$(document).ready(function() {
  
  $(window).scroll(function () {
      //if you hard code, then use console
      //.log to determine when you want the 
      //nav bar to stick.  
      console.log($(window).scrollTop())
    if ($(window).scrollTop() > 280) {
      $('#nav_bar').addClass('navbar-fixed');
    }
    if ($(window).scrollTop() < 281) {
      $('#nav_bar').removeClass('navbar-fixed');
    }
  });
});

html, body {
	height: 4000px;
}

.navbar-fixed {
    top: 0;
    z-index: 100;
  position: fixed;
    width: 100%;
}

#body_div {
	top: 0;
	position: relative;
    height: 200px;
    background-color: green;
}

#banner {
	width: 100%;
	height: 273px;
    background-color: gray;
	overflow: hidden;
}

#nav_bar {
	border: 0;
	background-color: #202020;
	border-radius: 0px;
	margin-bottom: 0;
    height: 30px;
}

.nav_links {
    margin: 0;
}

.nav_links li {
	display: inline-block;
    margin-top: 4px;
}
.nav_links li a {
	padding: 0 15.5px;
	color: #3498db;
	text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner">
     <h2>put what you want here</h2>
     <p>just adjust javascript size to match this window</p>
  </div>

  <nav id='nav_bar'>
    <ul class='nav_links'>
      <li><a href="url">Nav Bar</a></li>
      <li><a href="url">Sign In</a></li>
      <li><a href="url">Blog</a></li>
      <li><a href="url">About</a></li>
    </ul>
  </nav>
<div id='body_div'>
    <p style='margin: 0; padding-top: 50px;'>and more stuff to continue scrolling here</p>
</div>

Answer 2

添加到你的.nav css块

position: fixed

它会起作用

Answer 3

我希望这可以帮助别人.通过js确定导航偏移,然后将粘贴位置css应用于导航:

但首先,我们将在样式表中定义样式,就像这样.

.sticky {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    border-top: 0;
}

然后,我们将使用jQuery有条不紊地将该类应用于导航.

$(document).ready(function() {
  var stickyNavTop = $('.nav').offset().top;

  var stickyNav = function(){
    var scrollTop = $(window).scrollTop();

    if (scrollTop > stickyNavTop) { 
      $('.nav').addClass('sticky');
    } else {
      $('.nav').removeClass('sticky'); 
    }
  };

  stickyNav();

  $(window).scroll(function() {
    stickyNav();
  });
});

Answer 4

只需使用z-index最高喜欢的答案中所述的CSS属性，导航栏就会停留在顶部。

范例：

<div class="navigation">
 <nav>
   <ul>
    <li>Home</li>
    <li>Contact</li>
   </ul>
 </nav>

.navigation {
   /* fixed keyword is fine too */
   position: sticky;
   top: 0;
   z-index: 100;
   /* z-index works pretty much like a layer:
   the higher the z-index value, the greater
   it will allow the navigation tag to stay on top
   of other tags */
}

Answer 5

CSS：

.headercss {
    width: 100%;
    height: 320px;
    background-color: #000000;
    position: fixed;
}

属性position: fixed将使其保持卡住状态，而其他内容将可滚动。不要忘记设置width:100%使其完全填充到右侧。

例子