网页定位导航设计
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;
}