![](https://box.kancloud.cn/f12b058a75886d03eb957bb57af28901_1384x375.png)
~~~
<nav class="menu g-widthmin" jsFloatNav="nav" jsFloatPos="top">
<ul class="menuList g-width g-wrap">
<li class="act" jsFloatNav="part1">内容分类</li>
<li jsFloatNav="part2">业务全景图</li>
<li jsFloatNav="part3">解决方案</li>
<li jsFloatNav="part4">推荐业务</li>
<li jsFloatNav="part5">客户案例</li>
<li jsFloatNav="part6">合作伙伴</li>
</ul>
</nav>
~~~
~~~
/* -----
----- 页面滚动到相应位置,响应对应导航
-----obj :jsFloatNav="nav"
-----opr : jsFloatNav="**"
-----gid : jsFloatNavGid="**"
-----activeClass : "act"
----- */
if( $('[jsFloatNav]').attr("jsFloatNav") == "nav" ){
var _navArry =[];
var _navArryTop =[];
var _jsFloatNav = $('[jsFloatNav="nav"]').find('[jsFloatNav]');
var _jsFloatNavH = $('[jsFloatNav="nav"]').height();
for (var i = 0; i < _jsFloatNav.length; i++) {
_navArry[i] = _jsFloatNav.eq(i).attr("jsFloatNav");
_navArryTop[i] = $('[jsFloatNavGid='+ _navArry[i] +']').position().top - _jsFloatNavH;
}
_jsFloatNav.on("click",function(){
var _index = $(this).index();
$("body,html").animate({scrollTop: _navArryTop[_index] },500);
});
$(window).scroll(function(){
for (var i = 0; i < _navArry.length; i++) {
if( $(window).scrollTop() >= _navArryTop[i]){
_jsFloatNav.eq(i).addClass("act").siblings().removeClass("act");
}
}
});
}
~~~
- 基本规范
- 申明及解释
- 项目的构建及维护
- 项目构建
- 项目自测
- 项目维护
- 书写规则
- 图片规范
- html书写规范
- CSS书写规范
- JAVASCRIPT编写规范
- 注释书写规范
- 场景分类
- PC站-固定宽度
- PC站-响应式
- 移动端网站
- 移动端活动
- 模块的创建和管理
- 附件A 网站命名列表
- 附件B 常用技术列表
- 实例代码
- 前端框架
- 布局
- 栅格化布局
- 响应式布局
- 常规组件
- 面包屑
- 选项卡
- 分页
- 表单-模拟单选
- 表单-模拟多选
- 表单-模拟下拉菜单
- 筛选-simple
- 评分
- 导航-浮动导航
- 滚动到顶部
- 网站通用代码
- 客服代码
- 常见问题解决方案
- 兼容性问题
- 移动端通用
- andorid常见问题
- IOS常见问题
- 多媒体-视频
- 浏览器判断
- 动画库
- 宽高问题
- JQUERY常用组件
- 弹出层
- 多媒体-视频音频
- 幻灯片
- 时间与日期
- 分页
- 多级联动
- 表单美化
- 绘图及动画插件
- 前端工具及网站
- H5生成
- 图片处理
- 在线代码
- web字体
- 手册资料
- 其他工具
- 牛人blog
- 前端园地
- 交互网址
- 前端优化
- 元素动画