悬停头部

作者：曹え 5811
发布时间：2022-01-20 07:27:13
浏览次数：302

代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>模块名称</title>
		<meta name="renderer" content="webkit">
		<meta name="format-detection" content="telephone=no" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		
		<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

<style>
          	.ban {

height: 280px;
				background: url(https://h5.org.cn/images/ban-lb4.jpg) no-repeat center;
				background-size: cover;
			}
			
			.snav {
                background: #171717;
				height: 80px;
			
			}

.wp {
				width: 100%;
				max-width: 1400px;
				margin: 0 auto;
			}

.snav ul {
				height: 80px
			}

.snav li {
				float: left;
				margin-right: 41px
			}

.snav a {
				display: block;
				font-size: 24px;
				color: #fff;
				line-height: 80px;
				padding: 0 10px
			}

.snav li a:hover,
			.snav li.on a {
				background: #00a0e9;
				color: #fff
			}

.snav.fixed ul {
				position: fixed;
				left: 0;
				right: 0;
				top: 0;
				width: 1400px;
				height: 80px;
				z-index: 10;
				background: #171717;
				margin: 0 auto
			}

.snav.fixed ul:after {
				content: "";
				position: absolute;
				left: -999px;
				top: 0;
				bottom: 0;
				right: -999px;
				z-index: -1;
				background: #171717
			}

.snav.fixed-off ul {
				position: static;
				width: auto
			}

@media only screen and (max-width: 1500px) {

.wp {
					width: 1180px;
				}
			}

@media only screen and (max-width:1440px) {
				.snav a {
					font-size: 18px;
					line-height: 60px
				}

.snav li {
					margin-right: 20px
				}

.snav,
				.snav ul {
					height: 60px
				}

.snav.fixed ul {
					width: 1180px;
					height: 60px
				}
			}

@media only screen and (max-width:1199px) {
				.wp {
					width: auto;
					padding: 0 15px;
				}

.snav a {
					font-size: 16px
				}

.snav {
					height: auto
				}

.snav ul {
					height: auto;
					overflow: hidden
				}

.snav.fixed ul {
					width: auto;
					height: auto;
					position: static
				}

.snav.fixed ul:after {
					display: none
				}
			}

@media only screen and (max-width:768px) {
				.snav {
					text-align: center
				}

.snav li {
					width: 33.33%;
					margin: 0
				}

.snav a {
					font-size: 14px;
					line-height: 40px;
					padding: 0 5px
				}
			}

.a1 {
				height: 600px;
				background-color: yellowgreen;
			}

.a2 {
				height: 600px;
				background-color: lightblue;
			}

.a3 {
				height: 600px;
				background-color: orange;
			}
		</style>
	</head>

<body>
      <div class="ban"></div>
		<div class="snav">
			<div class="wp">
				<ul>
					<li class="on"><a href="#row-about1">公司简介</a></li>
					<li class=""><a href="#row-about2">愿景及使命</a></li>
					<li class=""><a href="#row-about3">核心价值观</a></li>
					<li><a href="#row-about4">发展历程</a></li>
					<li><a href="#row-about5">公司参观</a></li>
					<li><a href="#row-about6">资质荣誉</a></li>
					<li><a href="#row-about7">人才招聘</a></li>
					<li><a href="#row-about8">联系我们</a></li>
				</ul>
			</div>
		</div>

<div class="a1" id="row-about1"></div>
		<div class="a2" id="row-about2"></div>
		<div class="a3" id="row-about3"></div>
		<div class="a1" id="row-about4"></div>
		<div class="a2" id="row-about5"></div>
		<div class="a3" id="row-about6"></div>
		<div class="a1" id="row-about7"></div>
		<div class="a2" id="row-about8"></div>
		<script>
			// 锚点
			var hd_h = $('.header').height();
			var _winw = $(window).width();
			if (_winw > 1199) {

$(window).scroll(function() {
					var _top = $(window).scrollTop();

$(".snav li").each(function() {
						var _idName = $(this).find("a").attr("href");
						var _idTop = $(_idName).offset().top;
						var _wH = $(window).height();
						if (_top >= _idTop - 20) {
							$(".snav li").removeClass('on');
							$(this).addClass('on');
						}
					});
				});

$('.snav a').click(function() {
					var _top = $(window).scrollTop();
					$(".snav li").each(function() {
						var _idName = $(this).find("a").attr("href");
						var _idTop = $(_idName).offset().top;
						var _wH = $(window).height();
						if (_top >= _idTop - 20) {
							$(".snav li").removeClass('on');
							$(this).addClass('on');
						}
					});

$('html, body').animate({
						scrollTop: $($.attr(this, 'href')).offset().top
					}, 500);
					return false;
				});
			} else {
				$('.snav a').click(function() {
					$(this).parent('li').addClass('on').siblings('li').removeClass('on');
					$('html, body').animate({
						scrollTop: $($.attr(this, 'href')).offset().top - hd_h
					}, 500);
					return false;
				});
			}

$(window).scroll(function() {
				var _top = $(window).scrollTop();
				var _pTop = $(".snav").offset().top;
				if (_top >= _pTop) {
					$('.snav').addClass('fixed');
					$('.header').addClass('fixed-off');

//鼠标滑轮滚动切换轮播
					$(window).on('mousewheel DOMMouseScroll', function(e) {
						var dir = e.originalEvent.wheelDelta || -e.originalEvent.detail;
						if (dir > 0) {
							// 向上
							$('.header').addClass('fixed');
							$('.snav').addClass('fixed-off');
						} else {
							// 向下
							$('.header').removeClass('fixed');
							$('.snav').removeClass('fixed-off');

}
					});

} else {
					$('.snav').removeClass('fixed');
					$('.snav').removeClass('fixed-off');
					$('.header').removeClass('fixed-off');
					$(window).on('mousewheel DOMMouseScroll', function(e) {
						var dir = e.originalEvent.wheelDelta || -e.originalEvent.detail;
						if (dir > 0) {
							// 向上
							$('.header').removeClass('fixed-off');
						} else {

}
					});
				}
			});

</script>

</body>
</html>

预览[刷新]

320 360 460 768 960 1024 1280 1366 1460 1680 75% 全屏