js 滚动条往下滚动时自动切换菜单栏按钮

来源：互联网发布：创显班班通教学软件编辑：程序博客网时间：2024/05/21 11:35
<!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>
阅读全文
0 0