摘要：特点单页面官网不是传说中的单页面应用固定顶部，点击导航平滑过渡到指定锚点，鼠标上下滚动到锚点位置导航随之切换如考拉微课布局顶部导航栏内容区底部样式导航栏的样式要注意，这给当前样式多带带做了一个层，绝对定位，鼠标移动
特点
单页面官网--不是传说中的单页面应用！
固定顶部，点击导航平滑过渡到指定锚点，鼠标上下滚动到锚点位置导航随之切换
如：考拉微课
CSS样式111111222223333334444455555
导航栏的样式要注意，这给当前样式多带带做了一个DIV层，绝对定位，鼠标移动到哪个导航，这个当前样式层就移动到这个导航菜单上。
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=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插件
刚学完js的小白，思路都在注释中，看不懂的请留言，不喜勿喷，欢迎指正！
完整案例
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112450.html
摘要：特点单页面官网不是传说中的单页面应用固定顶部，点击导航平滑过渡到指定锚点，鼠标上下滚动到锚点位置导航随之切换如考拉微课布局顶部导航栏内容区底部样式导航栏的样式要注意，这给当前样式单独做了一个层，绝对定位，鼠标移动 特点 单页面官网--不是传说中的单页面应用！固定顶部，点击导航平滑过渡到指定锚点，鼠标上下滚动到锚点位置导航随之切换如：考拉微课 HTML布局 ...
摘要：特点单页面官网不是传说中的单页面应用固定顶部，点击导航平滑过渡到指定锚点，鼠标上下滚动到锚点位置导航随之切换如考拉微课布局顶部导航栏内容区底部样式导航栏的样式要注意，这给当前样式单独做了一个层，绝对定位，鼠标移动 特点 单页面官网--不是传说中的单页面应用！固定顶部，点击导航平滑过渡到指定锚点，鼠标上下滚动到锚点位置导航随之切换如：考拉微课 HTML布局 ...
摘要：方法的参数如下名称默认值描述需要移动的精灵贝塞尔曲线的坐标点的数组补间需要的帧数，也就是动画应该持续多长时间缓动类型用于确定精灵是否应在补间的起点和终点之间来回移动。 说明 补间动画指的是，我们可以通过为精灵的位置、比例、透明度，等属性，设置开始值和结束值，制作动画，动画中间需要的部分由软件自动计算填充。 Pixi 没有内置补间引擎，但是你可以使用很多很好的开源的补间库，比如 Twee...
摘要：但是就页面定位到指定位置其实还有更好的办法，就是使用去获取指定位置的，这样的话还可以加滑动动画，使定位的这个过程比较平滑。 需求 页面上有一排按钮，悬浮在窗口顶端，不随页面滑动而滑动，这一组按钮分别对应的是页面的各个部分，点击按钮，页面定位到对应的位置。 需求分析 拿到这个需求，很自然的想到，解决这个最简单的方法是使用锚点（能靠HTML和css解决的，尽量不使用js 解法 想到使用锚点...
摘要：但是就页面定位到指定位置其实还有更好的办法，就是使用去获取指定位置的，这样的话还可以加滑动动画，使定位的这个过程比较平滑。 需求 页面上有一排按钮，悬浮在窗口顶端，不随页面滑动而滑动，这一组按钮分别对应的是页面的各个部分，点击按钮，页面定位到对应的位置。 需求分析 拿到这个需求，很自然的想到，解决这个最简单的方法是使用锚点（能靠HTML和css解决的，尽量不使用js 解法 想到使用锚点...
阅读 1847·2021-09-14 17:57
阅读 3556·2021-09-04 16:45
阅读 1265·2021-09-02 19:23
阅读 1357·2021-08-11 11:19
阅读 411·2019-08-30 15:55
阅读 1470·2019-08-30 12:50
阅读 2097·2019-08-30 11:23
阅读 2056·2019-08-29 13:13
