<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<style type="text/css">
*{padding: 0;margin: 0;}
.wrap{width: 100%;height: 50px;position: fixed;top: 0;left: 0;background: #FCCD09}
.wrap a{color: #fff;line-height: 50px;margin: 0 30px;float: left;transition: .2s;padding: 0 5px}
.wrap .xuan{color: #ff0000}
.full{width: 100%;height: 1100px;margin-top: 50px;color: #fff;text-align: center;font-size: 300px}
</style>
<body>
<div class="wrap">
<li class=""><a href="#a" class="xuan">A</a></li>
<li class=""><a href="#b">B</a></li>
<li class=""><a href="#c">C</a></li>
<li class=""><a href="#d">D</a></li>
</div>
<div class="full" id="a" style="background: #000">#A</div>
<div class="full" id="b" style="background: #ffc99f">#B</div>
<div class="full" id="c" style="background: #ff0000">#C</div>
<div class="full" id="d" style="background: #ccb">#D</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
var fulla = $("#a").offset().top;
var fullb = $("#b").offset().top;
var fullc = $("#c").offset().top;
var fulld = $("#d").offset().top;
var index;
function scr(index){
$(".wrap li a").removeClass("xuan").eq(index).addClass("xuan")
}
$(window).scroll(function(){
var scrTop = $(window).scrollTop()+fulla+1;
scrTop > fulla && scrTop < fullb ? scr(0):(scrTop > fullb && scrTop < fullc ? scr(1):scrTop > fullc && scrTop < fulld?scr(2):scr(3));
// 下面是上面的意思
// if(scrTop > fulla && scrTop < fullb){
// scr(0)
// }else if(scrTop > fullb && scrTop < fullc){
// scr(1)
// }else if(scrTop > fullc && scrTop < fulld){
// scr(2)
// }else{
// scr(3)
// }
})
$('a[href^="#"]').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop: $(this.hash).offset().top}, 300);
});
</script>
</body>
</html>
js 滚动条往下滚动时自动切换菜单栏按钮
最新推荐文章于 2024-09-22 11:17:00 发布