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

最新推荐文章于 2022-08-21 10:22:57 发布

置顶霸霸霸霸天虎丶

最新推荐文章于 2022-08-21 10:22:57 发布

阅读量1.7k

点赞数

分类专栏： javascript jQuery 文章标签： javascript jQuery css html html5

本文链接：https://blog.csdn.net/TTTTT2017/article/details/78087431

版权

javascript 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

<!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>