<!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: 300PX;overflow: hidden;}.banner img{display: block;width: 100%;}/* 导航 */.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>