Introduction~
This is a tutorial that introduces the creation of the navigation bar in detail. Because I am a novice and self-taught, it is more difficult to find resources. I leave my own notes for your reference.
The overall layout is roughly as follows. Due to my own needs, some widgets have been added. If you just want a template, you can delete all the content inside the div after creating the project yourself.
Navigation Bar
Specific content
In this template, the state switching of the navigation bar is mainly implemented by js event monitoring. There are many forms of the navigation bar. Here, I did not use the label list to fill the inside of the navigation bar according to my own needs, but used div blocks. Although the forms are different, the implementation methods are similar.
According to the content:
- The overall layout is a very simple three divs put together up and down, one of which is the navigation bar, and the id numbers are assigned to the divs, which are div1, nav, and div2 from top to bottom.
- Note that if there is no content inside the div, the actual value of the length and width of the div should be marked, not a percentage. In addition, a background color can be added to the inside of the div to facilitate the distinction of different div squares.
- Add a scrolling event in js window.onscroll = function() { ....}; The function of this event is to monitor the scrolling behavior of the webpage, and execute the following function when scrolling occurs. This way we have a trigger event that triggers the js function.
- Then in the above function, define the variable dis to store the scrolling height of the webpage. The method of obtaining the height is as follows: var dis = document.documentElement.scrollTop; means to obtain the scrolling height of the elements in the webpage, and return the height value to the variable dis To store it, we can use console.log() to output the value of dis on the console to observe whether the entire function is running correctly, as shown in the figure below.
- Since we need to program the fixed state of the nav navigation bar when the screen scrolls to the point where the nav navigation bar is about to be covered, this means: when the screen is about to scroll to cover (judgment condition), add position:fixed to the control with the id nav ; , and then remove position:fixed; when the scroll height is less than nav is covered .
- Use the if statement to judge the state. In my webpage, since the navigation bar is div1 from the top, the judgment condition is to take effect when the scrolling distance of the screen exceeds the height of div1. Add attributes to the control using Element.setAttribute('class ','attribute name') this function, remove the attribute using Element.removeAttribute('class','attribute name'); the specific logic is as follows:
- The attribute to be added and removed is a css selector, which needs to be edited in advance, as follows:
Replenish:
Why do you want to add a margin-top to div1? The reason is that when nav adds position: fixed; then the navigation bar with the id of nav moves out of the normal document flow, causing the div1 block below it to merge upwards, which will cause visual The upper div1 suddenly lost a section, so I added a top margin to div1 to support it. Add and remove attributes in the same way.
Full code:
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="icon" id="head_icon" href="image/abixiniyamao.png">
<title>Document</title>
</head>
<body>
<div id="welcome">
<p>生日快乐！</p>
<div>
<button onclick="last_cat()"><</button>
<img src="image\lanmao.png" id="img_1" style="margin: auto 5px ;">
<img src="image\shizimao.png" id="img_2" style="margin: auto 5px ;">
<img src="image\yinjianceng.png" id="img_3" style="margin: auto 5px ;">
<button onclick="next_cat()">></button>
<p>PS:好多的猫猫头，你自己选一下叭</p>
</div>
</div>
<div id="nav">
<div id="head">
<p style="text-align: center;padding-top: 50px;">这是导航栏</p>
</div>
<div id="time"></div>
<div id="music"></div>
</div>
<div id="div_1">
<div class="test" style="text-align: center;padding-top: 50px;"><p>这是填充物，摆拍用~</p></div>
<div class="test" style="text-align: center;padding-top: 50px;"><p>这是填充物，摆拍用~</p></div>
<div class="test" style="text-align: center;padding-top: 50px;"><p>这是填充物，摆拍用~</p></div>
<div class="test" style="text-align: center;padding-top: 50px;"><p>这是填充物，摆拍用~</p></div>
<div class="test" style="text-align: center;padding-top: 50px;"><p>这是填充物，摆拍用~</p></div>
<div class="test" style="text-align: center;padding-top: 50px;"><p>这是填充物，摆拍用~</p></div>
<div class="test" style="text-align: center;padding-top: 50px;"><p>这是填充物，摆拍用~</p></div>
</div>
<div id="div_2">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
<div id="div_3">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
<div id="div_4">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
<script src="index.js"></script>
</body>
</html>CSS：
body{
width: 100%;
height: 5000px;
padding: 0px;
margin: 0px;
}
#welcome{
width: 80%;
height: 99px;
text-align: center;
margin: 0px auto;
padding: 0px;
}
p{
margin: 0px;
padding: 0px;
}
#nav{
width: 80%;
height: 150px;
margin: 0px auto;
background-color: lightslategray;
}#nav.fixed{
position: fixed;
top: 0px;
/* 可以通过设置top left right bottom 这四个属性来设置相对位置 */
left: 10%;
}
#div_1{
width: 80%;
height: 1500px;
margin: 0px auto;
background-color: lightcyan;
}
#div_1.fixed{
margin-top: 150px;
}
.test{
width: 200px;
height: 200px;
background-color: yellow;
float: left;
margin: 20px 20px;
}
#div_2{
width: 80%;
height: 1000px;
margin: 0 auto;
}
#div_3{
width: 80%;
height: 1000px;
margin: 0 auto;
}
#div_4{
width: 80%;
height: 1000px;
margin: 0 auto;
}JS：
window.onscroll = function() {
var dis = document.documentElement.scrollTop;
console.log(dis);
if(dis >= 99){
document.getElementById("nav").setAttribute('class','fixed');
document.getElementById("div_1").setAttribute('class','fixed');
}else{
document.getElementById("nav").removeAttribute('class','fixed');
document.getElementById("div_1").removeAttribute('class','fixed');
}
}
var i=0;
var head = document.getElementById("head_icon");
var src_cat = new Array("image/abixiniyamao.png","image/buoumao-haibaoshuangse.png","image/buoumao-xiyouse.png",
"image/buoumao-zhongdianse.png" ,"image/daimaomao.png","image/dajumao.png" ,
"image/heimao.png","image/jiafeimao.png","image/jinjianceng.png",
"image/lanbaimao.png","image/lanmao.png","image/lihuamao.png",
"image/meiduan.png","image/mianyinmao.png","image/nainiumao.png",
"image/yinjianceng.png","image/sanhuamao.png","image/shizimao.png",
"image/sifenkesiwumaomao.png","image/暹罗猫.png",);
function next_cat() {
// 获取图像id
var src_1 = document.getElementById("img_1");
var src_2 = document.getElementById("img_2");
var src_3 = document.getElementById("img_3");
i++;
if(i<18){
src_1.src=src_cat[i];
src_2.src=src_cat[i+1];
src_3.src=src_cat[i+2];
}else{
src_1.src=src_cat[i];
src_2.src=src_cat[i+1];
src_3.src=src_cat[0];
i=0;
}
head.href=src_cat[i+1];
}
function last_cat() {
// 获取图像id
var src_1 = document.getElementById("img_1");
var src_2 = document.getElementById("img_2");
var src_3 = document.getElementById("img_3");
if(i==0){
src_1.src=src_cat[18];
src_2.src=src_cat[19];
src_3.src=src_cat[0];
i=19;
}else if(i==1){
src_1.src=src_cat[19];
src_2.src=src_cat[0];
src_3.src=src_cat[1];
}else if(i>1)
{
src_1.src=src_cat[i-2];
src_2.src=src_cat[i-1];
src_3.src=src_cat[i];
}
i--;
head.href=src_cat[i+1];
}