移动端滚动导航元素滑入跟随滚动效果

最新推荐文章于 2022-03-25 20:20:09 发布

Edwiin_9

最新推荐文章于 2022-03-25 20:20:09 发布

阅读量265

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/Edwiin_9/article/details/102955116

版权

移动端滚动导航元素滑入跟随滚动效果

脑子不转圈想了半天记录一下

脑子不转圈想了半天记录一下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
		<style type="text/css">
		ul>li{
			 float: left;
			    margin: 0;
			    padding: 0;
			    width: 50px;
			    height: 309px;
		}
		p{
			width: 20px;
			height: 1px;
			background: red;
			transition: left 2s;
			    -moz-transition: left 2s; /* Firefox 4 */
			    -webkit-transition: left 2s; /* Safari 和 Chrome */
			    -o-transition: left 2s; /* Opera */
					position: absolute;
		}
		.parent{
			position: relative;
			margin: 0;
			padding: 0;
			width: 500px;
			height: 309px;
			overflow: scroll;
		}
		.son{
			position: absolute;
			margin: 0;
			padding: 0;
			left: 0;
			top: 0;
			list-style: none;
			display: flex;
			flex-wrap: nowrap;
		}
		</style>
	</head>
	<body>
		<div style=" position: relative;
    padding: 0;
    width: 500px;
    height: 309px;">
			<div class="parent">
				<ul class="son">
					<li>d</li>
					<li>d</li>
					<li>d</li>
					<li>d</li>
					<li>d</li>
					<li>d</li>
					<li>d</li>
					<li>d</li>
					<li>d</li>
					<li>d</li>
					<li>d</li>
					<li>d</li>
					<p></p>
				</ul>
			</div>
		</div>
		<script type="text/javascript">
			$('ul>li').click(function() {
				let left = $(this).offset().left;
				let sonleft = Math.abs($('.son').offset().left);
				$('p').css('left', left+sonleft-8)
			})
		</script>
	</body>
</html>