特点
单页面官网--不是传说中的单页面应用!
固定顶部,点击导航平滑过渡到指定锚点,鼠标上下滚动到锚点位置导航随之切换
如:考拉微课
HTML布局
<!--顶部导航栏-->
<div id="header">
<ul class="nav">
<li><a href="#con_1">Features</a></li>
<li><a href="#con_2">Product Center</a></li>
<li><a href="#con_3">Showcase</a></li>
<li><a href="#con_4">Service & Support</a></li>
<li><a href="#con_5">Contact Us</a></li>
<div class="nav_focus"></div>
</ul>
</div>
<!--内容区-->
<div class="container">
<div id="con_1">111111</div>
<div id="con_2">22222</div>
<div id="con_3">333333</div>
<div id="con_4">44444</div>
<div id="con_5">55555</div>
</div>
<!--底部-->
<div id="footer">footer</div>
CSS样式
导航栏的样式要注意,这给当前样式单独做了一个DIV层,绝对定位,鼠标移动到哪个导航,这个当前样式层就移动到这个导航菜单上。
<style>
*{margin:0;padding:0;}
li,ol,ul{list-style:none;}
a{color:#555;text-decoration:none;}
a:hover{color:#0380FF;text-decoration:none;}
#header{position:fixed;top:0;left:0;z-index:99;display:flex;width:100%;height:100px;background-color:rgba(255,255,255,.3);justify-content:center;align-items:center;}
.nav{position:relative;display:flex;box-sizing:border-box;width:100%;height:40px;flex-direction:row;align-items:center;}
.nav li{z-index:99;display:flex;margin-right:10px;flex:1;align-items:center;justify-content:center;}
.nav li a{padding:0 10px;white-space:nowrap;font-size:18px;}
.nav li a.cur{color:#0380FF;}
.nav_focus{position:absolute;width:100px;height:40px;border:1px solid #0380FF;border-radius:20px;box-shadow:0 0 10px rgba(0,0,0,.5);}/*当前样式层*/
.container{margin-top:100px;}/*上边距给一个顶部的高度,不至于被顶部导航覆盖*/
.container>div{height:800px;}
#con_1{background-color:#ddf8ff;}
#con_2{background-color:#f3ddff;}
#con_3{background-color:#75b46f;}
#con_4{background-color:#cfe053;}
#con_5{background-color:#54ade0;}
#footer{position:fixed;bottom:0;left:0;z-index:99;display:flex;width:100%;height:100px;background-color:rgba(255,255,255,.3);justify-content:center;align-items:center;}
</style>
JS方法封装
JS部分封装一个插件navScroll.js
/* 导航滚动插件 参数:
* navBox: 导航栏
* navA: 导航列表,内部嵌套带有锚点的a标签
* navFocus: 导航列表当前状态
* className:导航列表 当前状态下的className
* */
function navScroll(navBox,navA,navFocus,className) {
/* 设置 当前样式 宽度 和 位置 ,初始为第一个导航的位置*/
var index = 0; // 设置当前索引 初始为0
var $sW = navA.eq(index).outerWidth();
var $sL = navA.eq(index).position().left;
navFocus.css({ width: $sW, left: $sL });
curClass(navA.eq(index));
/* 鼠标移入到导航栏 改变当前样式*/
navA.mouseenter(function () {
curClass($(this));
navFocusMove($(this));
});
// 鼠标离开导航栏时 当前样式回到 上次位置
navBox.mouseleave(function () {
navFocus.stop().animate( {
width: $sW,
left: $sL
},function () {
/*给上一次导航添加当前样式*/
curClass(navA.eq(index))
})
});
/*滚动到某个部分 对应导航改变样式*/
$(document).on('scroll',function(){
var docTop = $(document).scrollTop()+100,
offsetTop=[];
for(var i = 0,length = navA.length;i<length;i++){
/*通过a标签href来获取ID选择器,转换为jq对象 使用jq方法*/
offsetTop.push($($(navA[i]).attr("href")).offset().top);
if( docTop>=offsetTop[i]){
curNav(navA.eq(i));
curClass(navA.eq(i));
navFocusMove(navA.eq(i))
}
}
});
/* 点击导航时 改变导航样式,文档平滑的滚动到指定的位置*/
navA.click(function() {
curNav($(this));
curClass($(this));
navFocusMove($(this));
$("html, body").animate({
/*根据a标签href转换为ID选择器 获取对应位置*/
scrollTop: $($(this).attr("href")).offset().top - 100+"px"
}, {
duration: 500,
easing: "swing"
});
return false;
});
// 当前样式 移动函数
function navFocusMove(that) {
navFocus.stop().animate( {
width: that.outerWidth(),
left: that.position().left
})
}
// 添加当前样式,删除其他当前样式
function curClass(curnavA) {
curnavA.addClass(className).parent().siblings().find('a').removeClass(className);
}
/*记录上一次当前样式所在位置 */
function curNav(obj) {
$sW = obj.outerWidth();
$sL = obj.position().left;
index = obj.parent().index();
}
// 改变窗口大小时 设置 导航的当前样式
$(window).resize(function () {
var $sW = navA.eq(index).outerWidth();
var $sL = navA.eq(index).position().left;
navFocus.css({ width: $sW, left: $sL });
}
)
}
JS方法调用
在页面中调用引用JQ库以及这个 navScroll.js插件
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="js/navScroll.js"></script>
<script>
$(function() {
// 获取重要节点
var $header = $('#header'),
$nav = $header.find('.nav'),
$nava =$nav.find('li > a'),
$navFocus = $nav.find('.nav_focus');
navScroll($nav,$nava,$navFocus,'cur');
})
</script>