When we browse the web, when the page is very long and needs to be pulled down, it should not be possible to view the navigation content above. However, after many websites are pulled down, the upper menu will become floating and still float at the top. How is this achieved?
Under normal circumstances, if you want to achieve the effect of the navigation menu on the top after the page is pulled down, you need to use an absolute positioning method, the code is as follows:
html part:
<div id="caidan">Here is the top navigation content</div>
<div id="neirong">
The content of the page
</div>
First, the page is divided into two parts: the top menu and the filled content. The ids of the two elements are named caidan and neirong respectively.
Next is the CSS code:
<style type="text/css">
#neirong{
width:100%;
height:1800px;
background: #0068C9;
}
#caidan{
position:fixed;
top:0;
left:0;
width:100%;
height:50px;
z-index:999;
}
</style>
Set the width of the element with id neirong to 100%, height to 1800px, and color to #0068C9, so that the entire page content exceeds the current screen window and supports the drop-down scroll bar.
In setting the caidan used to store the navigation of the webpage menu, the position positioning is absolute positioning fixed, which means the positioning relative to the current browser window, which is equivalent to fixing the navigation menu at the specified position, top is 0px from the top of the window, left to the left The distance is 0px, the width is 100%, the height is 50px, and the z-index stacking order is 999 to prevent it from being blocked by other elements with a large stacking order after being pulled down.
The above code can simply achieve the effect of the navigation menu on the top, but that is relative to the case where the navigation is directly at the top, then if there is a head image on the navigation menu, if you only use the absolute positioning of css, you cannot directly contact the window. The distance at the top is 0, which will affect the experience. At this time, we can use js to solve it.
<div id="tupiannr">Image content</div>
<div id="caidan2">Here is the top navigation content 2</div>
<div id="neirong2">
Content of the page 2
</div>
First, the page is divided into two parts: the top menu and the filled content. The ids of the two elements are named caidan and neirong respectively.
Next is the CSS code:
<style type="text/css">
#tupiannr{
width:100%;
height:90px;
background:#00850c;
}
#neirong2{
width:100%;
height:1800px;
background: #0068C9;
}
#caidan2{
left:0;
width:100%;
height:50px;
z-index:999;
}
</style>
<script type="text/javascript">
var gdt = document.getElementById('caidan2');
window.onscroll = function() {
var gd=document.body.scrollTop;
if(gd>90){
gdt.style.position="fixed";
gdt.style.top="0";
}else{
gdt.style.position="";
gdt.style.top="";
}
}
</script>
Pick up the object caidan2 through document.getElementById('caidan2');, and then window.onscroll to detect the scrolling state of the browser scroll bar.
When the page scroll is detected, document.body.scrollTop obtains the distance from the top of the scroll bar. When it exceeds 90px, set the position property of the object gdt to the absolute position from the top, and the distance from the top window is 0px. When the page scroll bar Going back to the top is to clear the css absolute position top attribute that was just added.
The scrolling state detected by js is combined with the absolute positioning of the css code, so that we can achieve a practical navigation bar on top.