网页定位导航特效

傷城~ 2022-06-09 12:50 190阅读 0赞

## 网页定位导航设计 ##

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;  
    \}