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>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
