网页定位导航特效

网页定位导航设计

1.解决问题流程：分析—设计——实现
2.特效分析分为左右两部分：
1）.左侧的内容，右侧悬浮的导航菜单
2）.左侧滚动，右侧不改变位置
3）.点击右侧，左侧定位相应栏目
4).左侧滚到相应栏目，右侧定位到对应链接
3.重难点
1）.左侧栏目和右侧导航菜单的显示样式实现
2）.导航与滚动条之间的定位关联
css scrollTop
4.导航与滚动条之间的定位关联
滚动条与右侧导航条（高亮设置）
滚动条在BC之间，2F；AB之间就是1F；以此类推

特效所需要掌握的技术点

scoll([data],fn):当用户滚动指定的元素时，会发生scroll事件。scroll事件适用于所有可滚动的元素和window对象（浏览器窗口）。
例如 当页面滚动条发生变化时，执行函数......：
$(window).scroll(function(){/*......*/}；
scrollTop[vall]：获取/设置匹配元素相对滚动条顶部的偏移。
offset()：获取匹配元素的相对偏移。返回对象包含两个整形属性：top和left，以像素计

使用jQuery实现网页定位导航

1.zencoding插件：可简化敲代码
(1) ul>li*5>a 按tab键
(2) 按住ALT键，就可以竖向选择
2.超链接悬浮或者座位焦点时(a.current 这里的current是设置第一个为默认)文字变白给个背景色
3.定位小技巧：
固定menu的位置的时候fixed完成之后
left:50% 先让要定位的元素居中显示；
margin-left:400px;再根据要相对定位的元素的宽度对要定位元素进行位置偏移。
 
锚点链接：html5使用id进行锚点链接，html5取消了name属性
((之前的方法：name="1" <a href="1">1</a>))
滚动条定位：jQuery库引用 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
@@网页定位导航特效
知识要点
jQuery中通过id筛选永远比用class筛选的效率要高的多所以通过$("#").find()更有效率
$(window).scroll()滚动条滚动的时候
$(document).scrollTop()获取滚动条距离页面顶端的距离
items是所有item的集合
each遍历所有item
m.offset().top是获取所有item距离顶端的距离
然后当前滚动条依次与item的距离比较
console.Log(元素)在控制台看该元素的值
each遍历item所以this的值也在变化
currentId获取当前的ID，return false跳出循环

浏览器调试

IE6不支持position:fixed，因此使用hack解决。
1、position的hack：
    * html #menu{
        position: absolute;
        top: expression((e=document.documentElement.scrollTop ? e : document.body.scrollTop) + 100 + "px");
    }
2、防止导航栏跳变：
    * html, * html body{
        background-image: url(about:blank);
        background-attachment: fixed;
    }