Home >Web Front-end >JS Tutorial >Detailed explanation of positioning and navigation position using jQuery
This article mainly introduces the positioning and navigation position effect based on jQuery in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.
When the scroll bar scrolls to the content area, the side navigation bar is positioned on the screen, stops moving, and clicks on the navigation bar to jump to the location of the content;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
*{
padding: 0;
margin: 0;
}
.left{
float: left;
padding: 0 0 328px 0;
}
.left p{
width: 800px;
height: 300px;
line-height: 300px;
text-align: center;
font-size: 30px;
background: gray;
margin: 10px 0;
}
.nav{
position: absolute;
right:20px;
top: 20px;
}
.nav p{
width: 100px;
height: 80px;
line-height: 80px;
text-align: center;
background: pink;
margin: 10px 0;
cursor: pointer;
}
.bottom{
overflow: hidden;
width: 100%;
position: relative;
}
</style>
<title>Document</title>
</head>
<body>
<img style="width:100%" src="o_1bsmo1kpn1hp61bm0176i1bk618uo9.jpg" alt="">
<p class="bottom">
<p class="left">
<p class="one leftp" id="one">
一
</p>
<p class="conOne leftp" id="two">
二
</p>
<p class="leftp" id="three ">
三
</p>
<p class="leftp" id="four">
四
</p>
</p>
<p class="nav">
<p class="one navp">one</p>
<p class="two navp">two</p>
<p class="three navp">three</p>
<p class="four navp">four</p>
</p>
</p>
<script src="jquery.js"></script>
<script>
$(window).scroll(function(e){
console.log($(window).scrollTop());
if ($(window).scrollTop() >$('#one').offset().top) {
$('.nav').css({'position':'fixed'});
console.log('ss');
} else{
$('.nav').css({'position':'absolute'});
}
})
$('.nav p').click(function(){
var i = $('.navp').index(this);
var x = $('.leftp').eq(i).offset().top;
$('html, body').animate({scrollTop:x+'px'},500);
})
</script>
</body>
</html>Related recommendations:
About jQuery to achieve positioning navigation effect
##Fullpage.js fixed navigation bar-implementation of positioning navigation bar_javascript skills
Detailed explanation of navigation bar implementation example in Bootstrap
The above is the detailed content of Detailed explanation of positioning and navigation position using jQuery. For more information, please follow other related articles on the PHP Chinese website!