使用css滚动时，使导航栏贴到顶部 [英] Make a nav bar stick to the top when scrolling with css

问题描述

我想让我的导航栏与页面一起移动，但如果用户向下滚动，则会粘到顶部。任何人都可以提供任何例子或如何？非常感激。 （我无法在任何其他语言）。我尝试使用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>关于我们< / a>< / li> 
< / ul> 
< / div> 
< / div> 
  

 

  / * www..com 
 Blinx服务
创建者Pierre Chedraoui 
（c）版权所有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; 
} 
  

解决方案

  $（document）.ready（function（）{$（window）.scroll（function（）{//如果你硬编码，以确定何时你想//导航条粘贴console.log（$（window）.scrollTop（））if（$（window）.scrollTop（）> 280）{$（'＃nav_bar'）。addClass （'navbar-fixed'）;} if（$（window）.scrollTop（）< 281）{$（'＃nav_bar'）。removeClass（'navbar-fixed'）;}}）;}） code> 

  html，body {height：4000px;}。navbar-fixed { top：0; z指数：100;位置：固定; width：100％;}＃body_div {top：0;位置：相对; height：200px; background-color：green;}＃banner {width：100％; height：273px;背景颜色：灰色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;颜色：＃3498db; text-decoration：none;}  

 < script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"> ;</script> ;<div id =banner> < h2>输入您想要的内容< / h2> < p>只需调整javascript大小以匹配此窗口< / p> < / div> < nav id ='nav_bar'> < ul class ='nav_links'> < li>< a href =url>导航栏< / a>< / li> < li>< a href =url>登录< / a>< / li> < li>< a href =url>博客< / a>< / li> < li>< a href =url>关于< / a>< / li> < / ul> < / nav>< div id ='body_div'> < p style ='margin：0; padding-top：50px;'>和更多可在此继续滚动的内容 

>


I am trying to make my nav bar move with the page but stick to the top if the user scrolls down. Could anyone provide any examples or how to? Much appreciated. (I'm hopeless in any other language). I tried using the css sticky but it didn't work.

<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;
}

解决方案

$(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>

这篇关于使用css滚动时，使导航栏贴到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！