js实现自动化生成左侧浮动锚点

最新推荐文章于 2024-09-28 02:51:09 发布

幸运人1

最新推荐文章于 2024-09-28 02:51:09 发布

阅读量982

点赞数

分类专栏： web前端文章标签：锚点左侧导航

本文链接：https://blog.csdn.net/fanjun_/article/details/89450425

版权

web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				box-sizing: border-box;
			}
			a{
				text-decoration: none;
			}
			ul,li{
				padding: 0;
			}
			.left-bar {
				position: fixed;
				width: 120px;
				left: -110px;
				top: 50%;
				transform: translateY(-50%);
				background-color: rgb(102, 102, 102);
				transition: all .3s;
			}
			
			.left-bar li {
				width: 100%;
				padding: 8px 15px;
				color: white;
				text-align: left;
				border-bottom: 1px solid white;
			}
			
			.left-bar li:hover {
				background-color: #fd8609c2;
				color: white;
			}
			
			.left-bar .active-bar li {
				background-color: #fd8609c2;
			}
			
			.left-bar:hover {
				opacity: 1;
			}
			
			.left-bar .right {
				position: absolute;
				right: -10px;
				top: 0;
				top: 50%;
				width: 20px;
				height: 20px;
				border-top: 2px solid rgb(102, 102, 102);
				border-right: 2px solid rgb(102, 102, 102);
				transform: rotate(45deg) translateY(-50%);
			}
			
			.show-bar {
				left: 15px;
			}
			
			p {
				width: 500px;
				height: 600px;
				line-height: 600px;
				margin-left: auto;
				margin-right: auto;
				margin-bottom: 50px;
				padding-left: 30px;
				border: 1px solid #eee;
			}
		</style>
	</head>

	<body>
		<p class="point">
			测试文档1
		</p>
		<p>
			测试文档2
		</p>
		<p class="point">
			测试文档3
		</p>
		<ul class="left-bar" >
			<div class="right"></div>
		</ul>
		<script src="../../js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				var leftBar = function() {
					if($('.left-bar').length > 0 && $('.point').length > 0) {
						$('.point').each(function(index) {
							$(this).attr('id', 'point_' + index)
							let text = `<a href="#point_${index}">
		                <li>${$(this).text()}</li>
	                    </a>`;
							$('.left-bar').append(text);
						})
						$('.left-bar a').click(function() {
							//过渡效果
							// $('html,body').animate({scrollTop: ($($(this).attr('href')).offset().top)},300);
							$(this).addClass('active-bar').siblings('a').removeClass('active-bar');
						});
						$(document).scroll(function() {
							if($(document).scrollTop() <= 0) {
								$('.left-bar').hide();
							} else {
								$('.left-bar').show();
							}
						})
						$('.left-bar .right').on('click', function() {
							if($('.left-bar').hasClass('show-bar')) {
								$('.left-bar').removeClass('show-bar')
							} else {
								$('.left-bar').addClass('show-bar')
							}
						})
					}
				};
				leftBar();
			})
		</script>
	</body>

</html>