导航栏在达到页首时保持固定 [英] Nav bar to remain fixed as soon as it reaches top of page

查看：72
本文介绍了导航栏在达到页首时保持固定的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在我的代码中，页面顶部有一个横幅，下面是一个导航栏。我想要做的是当我向下滚动时，横幅和横幅导航栏滚动像他们应该但只要导航栏到达页面的顶部，它仍然存在，即使我继续滚动。关于如何做到这一点的任何想法？



（注意：目前我只知道HTML / CSS;我还不知道Javascript，但是如果Javascript是唯一的解决方案，我会试着去理解）。

HTML：
$ b 

 <体> 
< div id =wrapper> 
< div id =header> 
< / div> 
< nav id =top_menu> 
< ul> 
< li class =current>< a href =＃> HOME< / a>< / li> 
< li>< a href =＃> MY PROFILE< / a>< / li> 
< li>< a href =＃> THE FLEET< / a> 
< ul> 
< li>< a href =＃>尼桑< / a>< / li> 
< li>< a href =＃> TOYOTA< / a>< / li> 
< li>< a href =＃> HONDA< / a>< / li> 
< li>< a href =＃> MAZDA< / a>< / li> 
< / ul> 
< / li> 
< li>< a href =＃>其他服务< / a>< / li> 
< li>< a href =＃> TERMS&状况及LT; / A>< /锂> 
< li>< a href =＃>常见问题解答< / a>< / li> 
< li>< a href =＃>关于我们< / a>< / li> 
< / ul> 
< / nav> 
< div class =content> 
< / div> 
< div id =footer>©rentPRO 2015< / div> 
< / div> 
< / body>

CSS： 

 <风格> 
 
 #header {
 background-image：url（https://lh6.googleusercontent.com/-4epq8pWSUKQ/VNX4lGi_GrI/AAAAAAAAAIo/9gDg5CubDO8/w1044-h201-no/header%2Bfinal1 .JPG）; 
背景大小：100％100％; 
 width：1075px; 
 height：200px; 
保证金：0自动; 
头寸：相对; 
} 
 
 #top_menu {
 display：block; 
头寸：固定; 
 top：210px; 
剩余：136px; 
 border-radius：4px; 
 border-width：1px 1px 1px; 
 border-style：solid; 
背景颜色：白色; 
 font-family：'Lato'，sans-serif; 
 font-size：14.85px; 
 height：40px; 
 width：1075px; 
 margin：0 auto; 
 border-color：＃A4A4A4; 
} 
 
< / style>


解决方案

我的解决方案不需要jQuery，所以享受： 



  function scrollTop（）{return（window.pageYOffset！== undefined）？ window.pageYOffset :( document.documentElement || document.body.parentNode || document.body）.scrollTop} var navbar = document.getElementById（'navbar'）var sticky_point = 100window.onscroll = function（）{if（scrollTop（ ）> = sticky_point）{navbar.style.position ='fixed'} else if（scrollTop（）< sticky_point）{navbar.style.position ='static'}}

body {margin：0;} header {width：100％; height：100px;背景：＃2c3e50;} nav {width：100％; height：30px;背景：＃34495e; < header> HEADER< /                     header>< nav id =navbar> NAVBAR< / nav>< div> Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Totam eaque nostrum quis asperiores tempore qui iure，nam，sed ratione deleniti maxime deserunt numquam？ Officiis magnam soluta maxime porro eaque，consequatur。 Lorem ipsum dolor坐下来，精神恍惚。 Totam eaque nostrum quis asperiores tempore qui iure，nam，sed ratione deleniti maxime deserunt numquam？ Officiis magnam soluta maxime porro eaque，consequatur。 Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Totam eaque nostrum quis asperiores tempore qui iure，nam，sed ratione deleniti maxime deserunt numquam？奉献自由，奉献。 Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Totam eaque nostrum quis asperiores tempore qui iure，nam，sed ratione deleniti maxime deserunt numquam？奉献自由，奉献。 Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Totam eaque nostrum quis asperiores tempore qui iure，nam，sed ratione deleniti maxime deserunt numquam？奉献自由，奉献。 Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Totam eaque nostrum quis asperiores tempore qui iure，nam，sed ratione deleniti maxime deserunt numquam？奉献自由，奉献。 Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Totam eaque nostrum quis asperiores tempore qui iure，nam，sed ratione deleniti maxime deserunt numquam？奉献自由，奉献。 Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Totam eaque nostrum quis asperiores tempore qui iure，nam，sed ratione deleniti maxime deserunt numquam？奉献自由，奉献。 Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。请将您的评论发送给我们，我们会尽快为您解答。 Duis aute irure dolor in renhenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Excepteur sint occaecat cupidatat non proident，sunt in culpa qui officia deserunt mollit anim id est laborum。 Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。请将您的评论发送给我们，我们会尽快为您解答。 Duis aute irure dolor in renhenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Excepteur sint occaecat cupidatat non proident，sunt in culpa qui officia deserunt mollit anim id est laborum。 Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。请将您的评论发送给我们，我们会尽快为您解答。 Duis aute irure dolor in renhenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Excepteur sint occaecat cupidatat non proident，sunt in culpa qui officia deserunt mollit anim id est laborum。 Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。请将您的评论发送给我们，我们会尽快为您解答。 Duis aute irure dolor in renhenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Excepteur sint occaecat cupidatat non proident，sunt in culpa qui officia deserunt mollit anim id est laborum。< / div>



滚动时，Javascript会检查您在页面上的位置，如果您位于 sticky_point 下方，则导航栏具有属性： position：fixed; 。



如果您遇到问题，请不要犹豫，网站。


In my code there is a banner at the top of the page and a nav bar just below it. What I want to do is when I scroll down, the banner & nav bar scroll like they should but as soon as the nav bar reaches the top of the page, it remains there even when I continue scrolling. any ideas on how i can do this?

(Note: for the moment I know only HTML/CSS; I don't know Javascript yet but if Javascript is the only solution, I will try to understand).

HTML:

<body>
    <div id="wrapper">
        <div id="header">
        </div>
        <nav id="top_menu">
            <ul>
                <li class="current"><a href="#">HOME</a></li>
                <li><a href="#">MY PROFILE</a></li>
                <li><a href="#">THE FLEET</a>
                    <ul>
                        <li><a href="#">NISSAN</a></li>
                        <li><a href="#">TOYOTA</a></li>
                        <li><a href="#">HONDA</a></li>
                        <li><a href="#">MAZDA</a></li>
                    </ul>
                </li>
                <li><a href="#">OTHER SERVICES</a></li>
                <li><a href="#">TERMS & CONDITIONS</a></li>
                <li><a href="#">FREQUENTLY ASKED QUESTIONS</a></li>
                <li><a href="#">ABOUT US</a></li>
            </ul>
        </nav>
        <div class="content">
        </div>
        <div id="footer">© rentPRO 2015</div>        
    </div>
</body>

CSS:

<style> 

    #header {
        background-image: url("https://lh6.googleusercontent.com/-4epq8pWSUKQ/VNX4lGi_GrI/AAAAAAAAAIo/9gDg5CubDO8/w1044-h201-no/header%2Bfinal1.jpg");
        background-size: 100% 100%;
        width: 1075px;
        height: 200px;
        margin: 0 auto;
        position: relative;
    }

    #top_menu {
        display:block;
        position: fixed;
        top: 210px;
        left: 136px;
        border-radius: 4px;
        border-width: 1px 1px 1px;
        border-style:solid;
        background-color: white;
        font-family: 'Lato', sans-serif;
        font-size: 14.85px;
        height: 40px;
        width: 1075px;
        margin: 0 auto;
        border-color: #A4A4A4;
    }

</style>

解决方案

My solution doesn't require jQuery, so enjoy :

function scrollTop() {
  return (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop
}
var navbar = document.getElementById('navbar')
var sticky_point = 100


window.onscroll = function() {
  if (scrollTop() >= sticky_point) {
    navbar.style.position = 'fixed'
  } else if (scrollTop() < sticky_point) {
    navbar.style.position = 'static'
  }
}

body {
  margin: 0;
}

header {
  width: 100%;
  height: 100px;
  background: #2c3e50;
}

nav {
  width: 100%;
  height: 30px;
  background: #34495e;
  top: 0;
}

<header>HEADER</header>
<nav id="navbar">NAVBAR</nav>
<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis magnam soluta maxime porro eaque, consequatur. Lorem ipsum dolor sit amet, consectetur
  adipisicing elit. Totam eaque nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis magnam soluta maxime porro eaque, consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque
  nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis magnam soluta maxime porro eaque, consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque nostrum quis asperiores tempore
  qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis magnam soluta maxime porro eaque, consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti
  maxime deserunt numquam? Officiis magnam soluta maxime porro eaque, consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis
  magnam soluta maxime porro eaque, consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis magnam soluta maxime porro eaque,
  consequatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam eaque nostrum quis asperiores tempore qui iure, nam, sed ratione deleniti maxime deserunt numquam? Officiis magnam soluta maxime porro eaque, consequatur.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

When you scroll, the Javascript checks where you are on the page, if you are below the sticky_point, the navbar has the property : position: fixed;.

Do not hesitate to ask me for help if you have problems integrating this in your website.

这篇关于导航栏在达到页首时保持固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆