定位导航
html
<div class="cate">
<div class="category">
<div class="category-menu w12" id="navigation">
<ul class="category-sticky-menu">
<li><a href="#box-1" class="category-menu--item active">公司介绍</a></li>
<li><a href="#box-2" class="category-menu--item">企业文化</a></li>
<li><a href="#box-3" class="category-menu--item">荣誉奖项</a></li>
<li><a href="#box-4" class="category-menu--item">加入我们</a></li>
<li><a href="#box-5" class="category-menu--item">联系我们</a></li>
</ul>
</div>
</div>
</div>
<div style="height: 800px; border: 1px solid red; padding: 100px 0; position: relative;" id="box-1">
123
</div>
<div style="height: 800px; border: 1px solid orange; padding: 100px 0; position: relative;" id="box-2">
456
</div>
<div style="height: 800px; border: 1px solid rgb(49, 47, 139); padding: 100px 0;" id="box-3">
789
</div>
<div style="height: 800px; border: 1px solid rgb(118, 118, 133); padding: 100px 0;" id="box-4">
11 121
</div>
<div style="height: 800px; border: 1px solid rgb(118, 118, 133); padding: 100px 0;" id="">
11 121
</div>
css
.cate {
height: 54px;
}
.category {
background: #ffffff;
width: 100%;
left: 0;
top: 85px;
}
.category-menu {
text-align: center;
min-width: inherit;
position: relative;
width: 610px;
}
.category-menu:before {
left: 0;
}
.category-menu:after {
right: 0;
}
.category-menu:before,
.category-menu:after {
z-index: 3;
width: 50px;
position: absolute;
content: '';
top: 0;
height: 100%;
}
.category-menu li a {
padding: 0 25px;
border: 1px solid #fff;
display: inline-block;
height: 30px;
line-height: 28px;
background: #fff;
color: #222;
border-radius: 5px;
}
.category-menu li {
margin: 0 2px;
display: inline-block;
font-size: 14px;
}
.category-menu:before {
background: url(../img/about/sticky-menu-left.svg);
}
.category-menu:after {
background: url(../img/about/sticky-menu-right.svg);
}
.category-menu:before,
.category-menu:after {
background-size: auto 100%;
}
.category-menu:before {
left: -45px;
background-position: left center;
}
.category-menu:after {
right: -45px;
background-position: right center;
}
.category-sticky-menu {
padding: 12px 0;
}
.category-sticky-menu {
background: transparent -webkit-gradient(linear, left top, left bottom, from(#0d2e40), color-stop(61%, #25495b), to(#416477)) 0% 0% no-repeat padding-box;
}
.category.active {
position: fixed;
z-index: 8;
background: none;
}
.category-menu .active {
background: #35a8db;
color: #fff;
}
js
<script>
if ($('.cate').length > 0) {
var thisclass = $('.category');
var thispar = $('.cate');
addEvent(window, 'scroll', function () {
var category = thispar.offset().top;
var xflmnavjs2 = $(window).scrollTop();
if (xflmnavjs2 > category) {
thisclass.addClass('active');
}
else {
thisclass.removeClass('active');
}
});
}
$('#navigation').navScroll({
mobileDropdown: true,
mobileBreakpoint: 768,
scrollSpy: true
});
</script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/navScroll.js"></script>
