jquery电梯导航

关键因素XFactor

已于 2023-08-16 14:58:55 修改

阅读量56

点赞数

分类专栏： JQuery 文章标签： jquery css

于 2023-03-29 09:14:40 首次发布

本文链接：https://blog.csdn.net/weixin_52923266/article/details/129820997

版权

JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

该代码示例展示了如何使用HTML列表创建球员名字展示，并结合CSS设置样式，JavaScript（jQuery）处理滚动事件和点击交互。当页面滚动到特定位置时，相应球员的背景会变色，点击球员名字可实现页面滚动到对应介绍部分。

摘要由CSDN通过智能技术生成

直接看效果

HTML代码

<ul>
	<li>库里</li>
	<li>科比</li>
	<li>詹姆斯</li>
	<li>杜兰特</li>
	<li>欧文</li>
</ul>
<div class="Fmvp"></div>
<div class="curry mvp">日天库</div>
<div class="kobe mvp">黑曼巴</div>
<div class="lbj mvp">灭霸詹</div>
<div class="kd mvp">死神杜</div>
<div class="lrving mvp">欧神仙</div>
<div class="Fmvp"></div>

css代码

* {
    margin:0;
    padding:0;
}
ul {
	position: fixed;
	top: 30%;
	left: 0;
	display: none;
}
ul li {
	list-style: none;
	width: 200px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	background: white;
	border: 1px solid black;
}
.curry {
	background: red;
	height: 400px;
	text-align: center;
}
.kobe {
	background: yellow;
	height: 400px;
	text-align: center;
}
.lbj {
	background: blue;
	height: 400px;
	text-align: center;
}
.kd {
	background: green;
	height: 400px;
	text-align: center;
}
.lrving {
	background: pink;
	height: 400px;
	text-align: center;
}
.active {
	background: red;
}
.Fmvp {
	background: black;
	height: 600px;
}
.mvp {
	font-size: 30px;
	color: white;
}

js代码

$(function() {
    var top = $('.curry').offset().top;
	var flag = true;
	toggle();
    function toggle() {
		if ($(document).scrollTop() >= top) {
			$('ul').fadeIn();
		} else {
			$('ul').fadeOut();
		}
	}
    $(window).scroll(function() {
		toggle();
		if (flag) {
				$('.mvp').each(function(i, ele) {
					if ($(document).scrollTop() >= $(ele).offset().top) {
					$('ul li').eq(i).addClass('active').siblings().removeClass('active');
				}
			})
		}
	})
    $('ul li').click(function() {
		flag = false;
		$(this).addClass('active').siblings().removeClass('active');
		let index = $(this).index();
		let current = $('.mvp').eq(index).offset().top;
		$('html,body').stop().animate({
			scrollTop: current
		}, function() {
			flag = true;
		})
	})
})

大功告成!