制作导航栏棒答案

【问题标题】：Make a nav bar stick制作导航栏棒
【发布时间】：2015-02-11 10:42:14
【问题描述】：

制作导航条棒制作导航条棒制作导航条棒制作导航条棒制作导航条棒制作导航条棒制作导航条棒制作导航条棒制作导航条棒制作导航条棒制作导航条棒制作导航条棒

/* 标题 */

<div class="headercss">

        <div class="headerlogo">

        </div>

    </div>



    /* BODY */

    body {
        margin: 0px;
        height: 2000px;
    }



    .headercss {
        width: auto;
        height: 320px;
        position: relative;
    }

    .headerlogo {
        width: auto;
        height: 250px;
        position: relative;
    }

    .nav {
        width: auto;
        height: 70px;
        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;
        overflow: hidden;
    }

    a:hover, a:active {
    }

【问题讨论】：

参考这里：stackoverflow.com/questions/6980821/…

标签： html css scroll nav sticky

【解决方案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>

【讨论】：

不错，但除了静态高度，您还可以计算横幅的高度，例如。 $('#banner').height()Improved Code
感谢您的解决方案！
导航接近顶部时滚动到底部时闪烁怎么办？我只是在这种“边缘情况”中苦苦挣扎，发现您需要在滚动顶部时向导航添加固定类，但在滚动 px i 小于（从顶部到导航 MINUS 横幅高度的 px 值）时删除。横幅高度可能因内容而异...
这很好用（尤其是使用@VipulBhatt 的自动高度调整），除了页面主体在转换时会按导航栏的高度向上跳跃。所以你还得同时调整#body_div的padding或者margin，来替换#nav_bar变为fixed时丢失的高度。
查找#banner 高度可能并不理想，因为这可能会改变。相反，您可以使用 $("#site-navigation").offset().top; 获取导航元素与顶部的距离

【解决方案2】：

添加到您的 .nav css 块

position: fixed

它会起作用的

【讨论】：

【解决方案3】：

我希望这可以帮助某人。通过js确定nav偏移，然后将sticky position css应用到nav：

但首先，我们将在样式表中定义样式，如下所示。

.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();
  });
});

【讨论】：

终于！让我永远找到一个正确处理可变高度导航的示例。做得好，谢谢！

【解决方案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 */
}

【讨论】：

这适用于我的模板。谢谢！！但是粘性和固定关键字会产生很大的不同。

【解决方案5】：

CSS：

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

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

Example

【讨论】：

@Pierre 然后将position: fixed 应用到.nav
@Pierre 如果您希望它位于最顶部，请添加top:0;
对不起，也许我没有尝试正确大声笑，我希望导航栏随着页面滚动，但如果它到达顶部，我希望它坚持到顶部。如果用户向上滚动，导航栏会在需要时移回其位置。谢谢
@Pierre 这很简单，但您需要检测有多少用户会滚动并需要 JavaScript。这很简单，你可以在这里阅读：stackoverflow.com/questions/14496240/… 这个问题已经被问到了。在发布您的问题之前尝试搜索现有问题。

【解决方案6】：

固定 headercss 位置。

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

然后给内容容器一个 320px 的 padding-top，这样它就不会在标题后面。

【讨论】：

【解决方案7】：

您只能通过两次创建菜单来使用 CSS。这并不理想，但它让您有机会对菜单进行不同的设计，一旦它位于顶部，您将只有 CSS，没有 jquery。这是 DIV 的示例（如果您愿意，当然可以将其更改为 NAV）：

<div id="hiddenmenu">
 THIS IS MY HIDDEN MENU
</div>
<div id="header">
 Here is my header with a lot of text and my main menu
</div>
<div id="body">
 MY BODY
</div>

然后有以下CSS：

#hiddenmenu {
position: fixed;
top: 0;
z-index:1;
 }
#header {
top: 0;
position:absolute;
z-index:2;
 }
#body {
padding-top: 80px;
position:absolute;
z-index: auto;
 }

这里有一个小提琴供你看：https://jsfiddle.net/brghtk4z/1/

【讨论】：

太臭了。为了互联网，请不要这样编码

【解决方案8】：

/* Add css in your style */


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


/* and use this javascript code: */

$(document).ready(function() {

  $(window).scroll(function () {
    if ($(window).scrollTop() > ) {
      $('.headercss').addClass('sticky-header');
    } else{
      $('.headercss').removeClass('sticky-header');
    }
  });
});

【讨论】：

【解决方案9】：

我建议使用 Bootstrap。 http://getbootstrap.com/。这种方法非常简单且重量轻。

<div class="navbar navbar-inverse navbar-fixed-top">
   <div class="container">
      <div class="navbar-collapse collapse">
         <ul class="nav navbar-nav navbar-fixed-top">
            <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>
</div>

您需要将 Bootstrap 包含到您的项目中，其中将包含必要的脚本和样式。然后只需调用类'navbar-fixed-top'。这会成功的。见上例

【讨论】：

请不要发帖duplicate answers - 2。相反，如果您认为是重复问题，请将其标记为重复问题。
谢谢 Rob，以后会做的

【解决方案10】：

只需调用此代码并将其调用到您的导航栏以获取粘性导航栏

  .sticky {
        /*css for  stickey navbar*/
        position: sticky;
        top: 0; 
        z-index: 100;
    }

【讨论】：

【解决方案11】：

要使标题具有粘性，首先您必须给出 position: fixed;用于css中的标题。然后您可以调整宽度和高度等。我强烈建议您阅读这篇文章。 How to create a sticky website header

这里还有代码可以解决标题以使其具有粘性。

header { 
   position: fixed; 
   right: 0; 
   left: 0; 
   z-index: 999;
}

上面的代码将进入你的 styles.css 文件中。

【讨论】：