右悬浮菜单，页面滚动监听

最新推荐文章于 2023-09-23 08:05:02 发布

JinmyHe

最新推荐文章于 2023-09-23 08:05:02 发布

阅读量671

点赞数 1

分类专栏： web前端-Javascript

本文链接：https://blog.csdn.net/weixin_42659625/article/details/81004891

版权

web前端-Javascript 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

本文介绍了一个关于页面滚动监听的实践案例，通过JavaScript实现菜单在页面滚动时始终保持悬浮在右侧。

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

写了一个页面菜单滚动监听的案例

样式部分：

/*右侧悬浮按钮*/
.brand-rightNav {
	position: fixed;
	right: 20px;
	top: -300px;
	z-index: 99;
	font-family: "微软雅黑";
}

.brand-rightNav li{
	width: 220px;
	height: 60px;
	line-height: 60px;
	margin-bottom: 10px;
	border:1px solid #d6d6d6;
	border-radius: 4px;
	text-align: center;
	color: #555;
	font-size: 18px;
	cursor: pointer;
	transition: all .3s;
	background: #fff;
}

.brand-rightNav li.active,
.brand-rightNav li:hover{
	border:1px solid #005dba;
	color: #fff;
	background: #005dba;
}

html部分：

<ul class="brand-rightNav">
	<li>菜单1</li>
	<li>菜单2</li>
	<li>菜单3</li>
	<li>菜单4</li>
</ul>

js部分：

< script >
	$(function() {
		var rNav = $('.brand-rightNav')
		var rNavLi = $('.brand-rightNav li')
		$(window).scroll(function() {
			if($(window).scrollTop() > 600) {
				rNav.css({
					'position': 'fixed',
					'top': 100
				}).addClass('animated bounceInRight')

			} else {
				rNav.css({
					'position': '',
					'top': ''
				})
			}
			if($(window).scrollTop() < 2515) {
				rNavLi.eq(0).addClass('active').siblings().removeClass('active');;
			}
			if($(window).scrollTop() > 2516 && $(window).scrollTop() < 3900) {
				rNavLi.eq(1).addClass('active').siblings().removeClass('active');;
			}
			if($(window).scrollTop() > 3901 && $(window).scrollTop() < 6600) {
				rNavLi.eq(2).addClass('active').siblings().removeClass('active');;
			}
			if($(window).scrollTop() > 6601) {
				rNavLi.eq(3).addClass('active').siblings().removeClass('active');;
			}

		});

		rNavLi.eq(0).click(function() {
			$(this).addClass('active').siblings().removeClass('active');
			var _i = $(this).index();
			$('body, html').animate({
				scrollTop: 700
			}, 300);
		});
		rNavLi.eq(1).click(function() {
			$(this).addClass('active').siblings().removeClass('active');
			var _i = $(this).index();
			$('body, html').animate({
				scrollTop: 2517
			}, 300);
		});
		rNavLi.eq(2).click(function() {
			$(this).addClass('active').siblings().removeClass('active');
			var _i = $(this).index();
			$('body, html').animate({
				scrollTop: 3902
			}, 300);
		});
		rNavLi.eq(3).click(function() {
			$(this).addClass('active').siblings().removeClass('active');
			var _i = $(this).index();
			$('body, html').animate({
				scrollTop: 6602
			}, 300);
		});

	}) 
</script>