jQuery鼠标滚动/点击定位

最新推荐文章于 2023-10-24 23:30:48 发布

Fish北冥

最新推荐文章于 2023-10-24 23:30:48 发布

阅读量481

点赞数 2

分类专栏： JS CSS 文章标签： js jquery html5 css3

本文链接：https://blog.csdn.net/qq_42400124/article/details/107355342

版权

JS 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

CSS

21 篇文章 2 订阅

订阅专栏

演示效果

HTML，jQuery点击滚动定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 公共样式 */
			body,input,h1,h2,h3,h4,h5,h6,b,c,e,i,g,p,div,dl,dt,dd,select,textarea,font,right,left{ margin:0; padding:0;}
			body,html{height:100%;position:relative;width: 100%;background-color: #FFFFFF;}
			ul, ol, li, dl, dd {margin: 0;padding: 0; list-style:none;}
			
			/* banner */
			.banner{width: 100%;box-sizing: border-box;overflow: hidden;height: 500px;overflow: hidden;}
			.banner img{display: block;width: 100%;height: 100%;object-fit: cover;}
			
			/* 导航 */
			.protab{width: 100%;box-sizing: border-box;display: flex;display: -webkit-flex;-webkit-justify-content: center;justify-content: center;background-color: #e9470a;}
			.protab ul{width: 1200px;display: flex;display: -webkit-flex;-webkit-justify-content: space-between;justify-content: space-between;}
			.protab ul li{width: 25%;position: relative;transition: all .3s;}
			.protab ul li:hover{background-color: rgba(0,0,0,0.2);}
			.protab ul li a{height: 70px;display: block;width: 100%;text-align: center;line-height: 70px;font-size: 15px;color: #FFFFFF;}
			.protab ul li::after{content: '';display: block;width: 0%;height: 3px;position: absolute;bottom: 0;left: 0;background-color: #FFFFFF;transition: all .3s;}
			.protab ul li.current::after{width: 100%;}
			.fixedSubNav{position:fixed;top:0;left:0;z-index:95}
			
			/* 内容css */
			.contents{width: 100%;height: 100%;}
			.contents .productcont{width: 100%;height: 100%;}
			.contents .productcont:nth-of-type(1){background-color: aliceblue;}
			.contents .productcont:nth-of-type(2){background-color: antiquewhite;}
			.contents .productcont:nth-of-type(3){background-color: aqua;}
			.contents .productcont:nth-of-type(4){background-color: aquamarine;}
			
			
		</style>
	</head>
	<body>
		<!-- banner -->
		<div class="banner">
			<img src="img/banner_01.jpg" />
		</div>
		
		<!-- 导航 -->
		<div class="protab">
			<ul>
				<li class="current"><a href="#product01">产品</a></li>
				<li><a href="#product02">服务与咨询</a></li>
				<li><a href="#product03">解决方案</a></li>
				<li><a href="#product04">典型产品</a></li>
			</ul>
		</div>
		
		<!-- 主体内容 -->
		<div class="contents">
			<div class="productcont" id="product01"></div>
			<div class="productcont" id="product02"></div>
			<div class="productcont" id="product03"></div>
			<div class="productcont" id="product04"></div>
		</div>
		
		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
		<script>
		// 滚动导航定位
		function scrollNav(){
				var  sections = $(".productcont"); 
				var  s_num = sections.length;
				var baheight=$(".banner").height();//获取banner高度
				sections.each(function(index,el){
					var _this = $(this);
					if( _this.offset().top <  $(document).scrollTop() + baheight ){
						$(".protab ul li").removeClass("current").eq(index).addClass("current");
					}
				});
				var targetTop = $(this).scrollTop();
				if (targetTop >= 300) {
					$(".protab").addClass("fixedSubNav");
				} else {
					$(".protab").removeClass("fixedSubNav");
				}
				
			}
		// 导航点击定位
		$(".protab ul li").on("click",function(e){
				var _this = $(this);
				var a = _this.children("a");
				var _href = a.attr("href");
				e.preventDefault() ;
				$("body,html").animate({
					'scrollTop': $(_href).offset().top
				});
		});
		// 给窗口添加滚动事件
		$(window).on("scroll.nav",function(e){  
				scrollNav();  // 滚动导航
		});
		$(window).trigger("scroll.nav");
	</script>
		
		
	</body>
</html>

Fish北冥

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
jQuery鼠标滚动/点击定位

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 公共样式 */ body,input,h1,h2,h3,h4,h5,h6,b,c,e,i,g,p,div,dl,dt,dd,select,textarea,font,right,left{ margin:0;.
复制链接

扫一扫