网页定位导航特效_学习笔记

首页免费课网页定位导航特效笔记

网页定位导航特效

                
                姜维
            Web前端工程师

                    查看讲师更多课程 
                    姜维讲师的其他课程
                
jQuery插件——Validation Plugin
中级·65872
免费课程
                                
jQM Web App –列车时刻表
中级·38497
免费课程
                                
基于bootstrap的网页开发
中级·187695
免费课程
                                
WEB调试工具---Firebug
初级·77668
免费课程
                                
用JS实现放大镜特效
初级·30113
免费课程
                                
                难度初级
            
                时长 1小时 1分
            
                学习人数
            
综合评分9.77
                            332人评价
                        查看评价
                                9.9
                                内容实用
                            
                                9.7
                                简洁易懂
                            
                                9.7
                                逻辑清晰

最热最新

keeliu

算法： 1、通过$(document).scrollTop(),获得滚动条据顶部的高度top 2、find（）找到所有的class为“item”标签 3、通过offset（）.top获得标签距离顶部的高度 4、通过each()循环比较两个高度值，找出当前显示div 5、重置选中状态 6、通过find("[href="+N+"]").addClass()实现修改选中标签

查看全部

4 采集收起来源：编程练习
2018-03-22
黎酱

1.zencoding插件：可简化敲代码 (1) ul>li*5>a 按tab键 (2) 按住ALT键，就可以竖向选择 2.超链接悬浮或者座位焦点时(a.current 这里的current是设置第一个为默认)文字变白给个背景色 3.定位小技巧：固定menu的位置的时候fixed完成之后 left:50% 先让要定位的元素居中显示； margin-left:400px;再根据要相对定位的元素的宽度对要定位元素进行位置偏移。

查看全部

4 采集收起来源：使用jQuery实现网页定位导航（上）
2018-03-22
kingry

锚点链接：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跳出循环

查看全部

3 采集收起来源：使用jQuery实现网页定位导航（中）
2018-03-22
墨羽霓裳

网页定位导航特效 1.html+css 完成页面内容显示和页面样式设计 2.在css中，用position：fixed;让导航菜单在左侧绝对定位显示 3.以锚点实现点击左侧导航条链接，右侧定位到相应栏目，在html5中，以id表示锚点 4.滚动条滚动时左侧导航菜单自动设置焦点，定位到相应链接，遍历item设置currentId，然后给菜单设置current类

查看全部

3 采集收起来源：编程挑战
2015-07-29
慕工程2957023

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

查看全部

3 采集收起来源：特效设计
2016-10-13
qq_炬力北方陈_0

谢谢老师

查看全部

3 采集收起来源：结语
2015-03-10
桥风L

var top = document.documentElement.scrollTop || document.body.scrollTop; var top = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop;这两个不是等价的么？

查看全部

2 采集收起来源：编程练习
2016-04-08
JoV

编程挑战本代码利用课程中所学的知识实现了简单的类似于天猫新首发页面的效果，天猫新首发页面在导航效果的基础上又加入了很多额外的特效，感兴趣的同学可以在此基础上发挥想象，把效果做得更加完善。

查看全部

2 采集收起来源：编程挑战
2014-12-15
他人无我

此处正则可以不用，直接调用字符串的indexOf()方法即可 function hasClass(obj,cls){ return obj.className.indexOf(" "+cls+" ")!=-1||obj.className.indexOf(" "+cls)!=-1||obj.className.indexOf(cls+" ")!=-1; }

查看全部

2 采集收起来源：使用JS实现函数
2018-03-22
隐问

IE6下不支持position的fixed属性解决方法： /*ie6 hack / * html.*html body{ position:absolute; top:expression(((e=document.documentElement.scollTop)?e:document.body.scollTop)+100+'px'); } 不让导航栏闪跳： * html,* html body{ }

查看全部

2 采集收起来源：浏览器调试
2015-08-19
梦身

JS实现网页导航栏最终版仅利用classname即可，无需添加hasclass等函数

查看全部

2 采集收起来源：编程练习
2015-07-22
jeanneze 05:30

解决IE6下模拟fixed定位产生的跳动bug： *html,*html body{background-image:url(about:blank);background-attachment:fixed;}

查看全部

2 采集收起来源：浏览器调试
2018-03-22
jeanneze 04:29

IE6解决不支持fixed定位的方法： /*ie6 hack*/ *html #menu{ /*一下代码等价于fixed*/ position:absolute; top:expression(((e=documentElement.scrollTop)?e:document.body.scrollTop)+'px'); }

查看全部

2 采集收起来源：浏览器调试
2018-03-22
Dong大瓜

最新版jquery：
属性选择器用法--$("[attribute='value']")
而这里menu.find("[href="+currentId + "]"不适用
本来改成menu.find("[href='currentId' ]"的，但是currentid是变量不能呗引号包住
所以就是menu.find("[href='"+currentId+"']" )
摘

查看全部

2 采集收起来源：使用jQuery实现网页定位导航（下）
2018-06-11
洛雪

var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;或var top = document.documentElement.scrollTop || document.body.scrollTop;用js实现滚动时根据滚动条的位置自动设置导航菜单的焦点在chrome下document.documentElement.scrollTop为0，用var top = document.documentElement.scrollTop || document.body.scrollTop;

查看全部

2 采集收起来源：编程练习
2015-03-22