导航栏根据页面滚动自动定位效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<title>导航栏自动定位效果</title>
<style>
html, body, div, ul, li {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
#sidebar {
width: 50px;
height: 500px;
position: fixed;
left: 50%;
top: 200px;
margin-left: calc(-30% - 60px);
}
#sidebar ul li {
width: 50px;
height: 50px;
background: skyblue;
border: 1px dashed #eee;
color: #fff;
text-align: center;
line-height: 50px;
cursor: pointer;
}
#sidebar ul li.cur {
background: orange;
color: #37c1e3;
font-weight: bold;
}
.item {
width: 60%;
height: 800px;
background: #cccccc;
margin: 0 auto;
font-size: 50px;
color: #fff;
text-align: center;
border-bottom: 1px solid #37c1e3;
}
</style>
<script src="https://cdn.timecdn.cn/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
function SideBar(opt) {
var self = this;
this.opt = {
sidebar: '',
items: ''
};
this.opt = opt;
this.click_F = false;
this.proboxTop = [];
this.opt.sidebar.find('li').eq(0).addClass('cur');
$.each(self.opt.items, function(index) {
self.proboxTop[index] = self.opt.items.eq(index).offset().top;
});
this.init();
}
SideBar.prototype = {
init: function() {
this.clickTo();
this.scrollTo();
},
clickTo: function() {
var self = this;
this.opt.sidebar.find('li').click(function() {
self.click_F = true;
var index = $(this).index();
$('html,body').finish().animate({
scrollTop: self.proboxTop[index]
}, function() {
self.click_F = false;
});
$(this).addClass('cur').siblings().removeClass('cur');
});
},
scrollTo: function() {
var self = this;
this.change($(window).scrollTop());
$(window).on('scroll', function() {
if (self.click_F) {
return;
}
self.change($(this).scrollTop());
});
},
change: function(scrollTop) {
var self = this;
var el = self.opt.sidebar;
for (var index = 0; index < self.proboxTop.length - 1; index++) {
if (self.proboxTop[index] <= scrollTop && self.proboxTop[index + 1] > scrollTop) {
el.find('li').eq(index).addClass('cur').siblings().removeClass('cur');
}
}
if (self.proboxTop[self.proboxTop.length - 1] <= scrollTop) {
el.find('li').eq(self.proboxTop.length - 1).addClass('cur').siblings().removeClass('cur');
}
}
}
var scroll = new SideBar({
sidebar: $('#sidebar'),
items: $('.item')
});
});
</script>
</head>
<body>
<div id="sidebar">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
</div>
<div class="content">
<div style="background:pink" class="item">one</div>
<div style="background:deepskyblue" class="item">two</div>
<div style="background:greenyellow" class="item">three</div>
<div style="background:green" class="item">four</div>
<div style="background:orange" class="item">five</div>
</div>
<div style="height:500px;"></div>
</body>
</html>