堆栈内存溢出
  简体   繁体   English

是什么使我的导航栏在滚动时停留在顶部？

[英]What is making my navigation bar sticking on top while scrolling?

 原文  2017-03-22 08:14:26  0   2    javascript/ html/ css/ navbar/ jsfiddle

问题描述

I am wondering what is making my nav bar sticking to the top while scrolling since I have just basic html and css code? 我想知道是什么让我的导航栏在滚动时停留在顶部，因为我只有基本的html和CSS代码？ Last time I was not able to do so without javascript. 上一次，我无法使用javascript。 Thanks in advance 提前致谢

Here is JSFiddle link: https://jsfiddle.net/tw03egpc/ 这是JSFiddle链接： https ://jsfiddle.net/tw03egpc/ 

 body { background-color: black; } #heder { background-color: blue; color: aqua; } #wrap { z-index: 1; margin: 0; padding: 0; position: fixed; left: 0; top: 0; width: 100%; } #navWrap { height: 30px; opacity: 0.7; filter: alpha(opacity=80); } #nav { height: 95px; padding: 5px; background: #999; } #nav ul { margin: 0; padding: 0; } #nav li { float: left; padding: 3px 8px; background-color: grey opacity: 0.5; margin: 0; color: #f00; list-style-type: none; } #nav li a { color: black; text-decoration: none; margin: 10 px; -webkit-transition: 0.2s 0.2s; } #nav li a:hover { color: red; } br.clearLeft { clear: : left; } #positionli { position: absolute; top: 70px; left: 10pX; } .image { width: 1000px; height: 725px; opacity: 0.3; filter: alpha(opacity=30); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: ass 1s ease; transition: : ass 1s ease; } .image:hover { width: 1100px; height: 800px; opacity: 0.9; filter: alpha(opacity=100); } .imageframe { border: 3px solid #fff; width: 1000px; height: 725px; margin: 0px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px 5px #111; box-shadow: 5px 5px 5px #111; } #positionimage { position: absolute; top: 108px; left: 2; } #div { width: 580; height: 678; overflow: scroll; border: 1px solid white; padding: 25; margin: 25px; position: absolute; right: 100px; top: 84px; left: 988px; } .p { color: white; } #h1 { color: white; display: flex; align-items: center; justify-content: center; position: relative; top: 837; } p { width: 700px; color: aliceblue; padding: 20px; margin: 10px; position: absolute; top: 1100px; } #h11 { color: white; position: relative; top: 1070; margin: 10px; } 
 <body> <div id="wrap"> <div id="header"> <div id="navWrap"> <div id="nav"> <div id="positionli"> <ul> <li><a href="#"> Demo Link 1</a></li> <li><a href="#"> Demo Link 2</a></li> <li><a href="#"> Demo Link 3</a></li> <li><a href="#"> Demo Link 4</a></li> </ul> </div> <br class="clearLeft" /> </div> </div> </div> </div> <div id="positionimage"> <div class="imageframe"> <img class="image" src="https://www.qdtricks.net/wp-content/uploads/2016/05/hd-road-wallpaper.jpg"> </div> </div> <div id="div"> <iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FInfinitiv%2Fposts%2F1250296021672270&width=500" width="500" height="475" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe> <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FInfinitiv%2Fvideos%2F1266500823385123%2F&show_text=0&width=400" width="500" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe> </div> <!-- <h1> _____Videos_____ </h1>--> <!-- <h1 id="h11"> About us </h1> --> <p> Infinitiv je troclani sastav nastao u Pozarevcu krajem 2010. koji danas radi i stvara u Beogradu. 2012. su izdali svoj prvi EP pod nazivom ,,Deep inside''. Posle dosta svirki sirom Srbije i ucesca na festivalima i takmicenjima(BDFL 2013, Majska gitarijada 2012), bend krajem 2013. objavljuje svoj prvi album ''U beskraj'', sa opcijom free download-a preko Nocturne magazine-a. Nakon toga, bend zapocinje koncertnu promociju pesama sa prvog albuma, kao i izradu i promociju pesama koje ce se naci na drugom albumu cije je objavljivanje planirano za 2017 godinu. U julu 2016. bend osvaja prvo mesto na Kursumlijskoj gitarijadi </p> <br/> </body>

2 个解决方案

解决方案1
 2  2017-03-22 08:25:48

Your nav bar is sticking to the top because of position: fixed defined in #wrap . 您的nav栏由于position: fixed而#wrap在顶部position: fixed在#wrap定义为#wrap 。

position: fixed will fix the element and it's children to the specified position. position: fixed将元素及其子元素position: fixed到指定位置。

To know more about HTML positioning. 要了解有关HTML定位的更多信息。

  1. https://developer.mozilla.org/en/docs/Web/CSS/position https://developer.mozilla.org/en/docs/Web/CSS/position
  2. https://www.w3schools.com/cssref/pr_class_position.asp (Check the Play It ›› ) https://www.w3schools.com/cssref/pr_class_position.asp （检查播放›› ） 

 body { background-color: black; } #heder { background-color: blue; color: aqua; } #wrap { z-index: 1; margin: 0; padding: 0; /* comment below line "position: fixed;" to get the default behaviour */ position: fixed; left: 0; top: 0; width: 100%; } #navWrap { height: 30px; opacity: 0.7; filter: alpha(opacity=80); } #nav { height: 95px; padding: 5px; background: #999; } #nav ul { margin: 0; padding: 0; } #nav li { float: left; padding: 3px 8px; background-color: grey opacity: 0.5; margin: 0; color: #f00; list-style-type: none; } #nav li a { color: black; text-decoration: none; margin: 10 px; -webkit-transition: 0.2s 0.2s; } #nav li a:hover { color: red; } br.clearLeft { clear: : left; } #positionli { position: absolute; top: 70px; left: 10pX; } .image { width: 1000px; height: 725px; opacity: 0.3; filter: alpha(opacity=30); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: ass 1s ease; transition: : ass 1s ease; } .image:hover { width: 1100px; height: 800px; opacity: 0.9; filter: alpha(opacity=100); } .imageframe { border: 3px solid #fff; width: 1000px; height: 725px; margin: 0px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px 5px #111; box-shadow: 5px 5px 5px #111; } #positionimage { position: absolute; top: 108px; left: 2; } #div { width: 580; height: 678; overflow: scroll; border: 1px solid white; padding: 25; margin: 25px; position: absolute; right: 100px; top: 84px; left: 988px; } .p { color: white; } #h1 { color: white; display: flex; align-items: center; justify-content: center; position: relative; top: 837; } p { width: 700px; color: aliceblue; padding: 20px; margin: 10px; position: absolute; top: 1100px; } #h11 { color: white; position: relative; top: 1070; margin: 10px; } 
 <body> <div id="wrap"> <div id="header"> <div id="navWrap"> <div id="nav"> <div id="positionli"> <ul> <li><a href="#"> Demo Link 1</a></li> <li><a href="#"> Demo Link 2</a></li> <li><a href="#"> Demo Link 3</a></li> <li><a href="#"> Demo Link 4</a></li> </ul> </div> <br class="clearLeft" /> </div> </div> </div> </div> <div id="positionimage"> <div class="imageframe"> <img class="image" src="https://www.qdtricks.net/wp-content/uploads/2016/05/hd-road-wallpaper.jpg"> </div> </div> <div id="div"> <iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FInfinitiv%2Fposts%2F1250296021672270&width=500" width="500" height="475" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe> <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FInfinitiv%2Fvideos%2F1266500823385123%2F&show_text=0&width=400" width="500" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe> </div> <!-- <h1> _____Videos_____ </h1>--> <!-- <h1 id="h11"> About us </h1> --> <p> Infinitiv je troclani sastav nastao u Pozarevcu krajem 2010. koji danas radi i stvara u Beogradu. 2012. su izdali svoj prvi EP pod nazivom ,,Deep inside''. Posle dosta svirki sirom Srbije i ucesca na festivalima i takmicenjima(BDFL 2013, Majska gitarijada 2012), bend krajem 2013. objavljuje svoj prvi album ''U beskraj'', sa opcijom free download-a preko Nocturne magazine-a. Nakon toga, bend zapocinje koncertnu promociju pesama sa prvog albuma, kao i izradu i promociju pesama koje ce se naci na drugom albumu cije je objavljivanje planirano za 2017 godinu. U julu 2016. bend osvaja prvo mesto na Kursumlijskoj gitarijadi </p> <br/> </body>

解决方案2
 0 已采纳  2017-03-22 08:23:42

Like @Sreenath already said: you use 'position: fixed' for your #wrap. 就像@Sreenath已经说过的：#wrap使用'position：fixed'。

Try to use this: 尝试使用此： 

#wrap {
  z-index: 1;
  margin: 0;
  padding: 0;
  position: relative;
  left: 0;
  top:0;
  width: 100%;
}

Unless you want other behaviour, then you'll have to clearly mention what you want to achieve. 除非您想要其他行为，否则您必须明确提及您想要实现的目标。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 滚动时我无法使导航栏停留在顶部 - I can't making the navigation bar stick to top when scrolling 滚动时如何使此导航栏浮动在顶部？ - How to make this navigation bar floating on top while scrolling? 在HTML中向下滚动时将导航栏移到顶部 - Moving navigation bar to the top while scrolling down in HTML 如何在滚动时将导航栏固定在顶部 - How to fix the navigation bar on top on scrolling Bootstrap滚动时将导航栏固定在顶部 - Bootstrap Fixing navigation bar on top when scrolling 滚动过去后将Div停留在顶部 - Sticking Div to Top After Scrolling Past it 如何在滚动时突出显示导航栏 - how to highlight navigation bar while scrolling 预加载时顶部导航栏保持不变 - Top navigation bar is constant while preloading 在Twitter Bootstrap中如何在滚动时将菜单栏固定在顶部 - In Twitter Bootstrap How can I fix my menu bar on the top while scrolling 滚动到页面顶部后，使导航栏恢复正常 - Making a nav bar revert to normal after scrolling to top of page
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM