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

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

网页定位导航特效

                
                姜维
            Web前端工程师

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

最热最新

weibo_卡农201409_0 01:51

注意了

查看全部

0 采集收起来源：特效设计
2016-05-02
谟骁 01:54

scroll

查看全部

0 采集收起来源：特效设计
2016-05-02
柯基弟弟 01:52

所需用到的技术点 $(window).onscroll(function(){}) 窗口发生滚动时的事件 scrollTop(); 获取匹配元素相对滚动条顶部的偏移 offset().top 或 offset().left 获取相对父元素的偏移

查看全部

0 采集收起来源：特效设计
2014-12-17
柯基弟弟

万能设计流程：分析-设计-实现

查看全部

0 采集收起来源：练习题
2014-12-17
柯基弟弟

单页面的网页比较流行，可以展示更多的信息，让客户能够快速的浏览信息。但是不方便定位，所以要有良好的导航是至关重要的。

查看全部

0 采集收起来源：特效介绍
2014-12-17
鲈先森

$(document).ready(function () { $(window).scroll(function () { var top = $(document).scrollTop(); var menu = $("#menu"); var items = $("#content").find(".item"); // 请补充此处代码，让导航菜单实现在滚动条滚动的时候自动设置焦点 var currentId = ""; items.each(function(){ var $this = $(this); if (top>$this.offset().top){ currentId = "#"+$this.attr("id"); }else { return false; } }); var currentLink = menu.find(".current"); if(currentId&&currentLink.attr("href")!=currentId){ currentLink.removeClass("current"); menu.find("[href="+currentId+"]").addClass("current"); } }); });

查看全部

0 采集收起来源：编程挑战
2018-03-22
鲈先森

$(document).ready(function(){ //当滚动条发生动作 $(window).scroll(function(event) { var top = $(document).scrollTop();//滚动栏的高度 var menu = $("#menu"); var items = $(".item"); var currentId = "";//用于记录当前的item的id items.each(function(index, el) { var currentClass = menu.find(".current");//找到设置了默认样式的元素 var $this = $(this); var itemTop = $this.offset().top;//当前的item距离浏览器的高度 if (top>itemTop-200){ currentId = "#"+$this.attr("id");//记录当前的item的id }else { return false; }//判断当前有没有加样式 if (currentId&&currentClass.attr("href") != currentId){ currentClass.removeClass("current"); //找到与item一致的元素并加上样式 $("#menu a").each(function(index, el) { if($(this).attr("href")==currentId){ $(this).addClass('current'); } });} });}); })

查看全部

0 采集收起来源：编程练习
2018-03-22
liuhui_niu 01:51

特效用到的知识点

查看全部

0 采集收起来源：特效设计
2014-12-16
翱翔的鱼儿

js实现网页特效 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

查看全部

0 采集收起来源：编程练习
2014-12-16
慕仙0974441

解决问题流程：分析—设计——实现

查看全部

0 采集收起来源：网页定位导航设计
2016-04-27
qq_火翼_0

解决IE6不兼容fixed属性的方法，在css中加入： /*ie6 hack*/ *html,*html body{ background-image:url(about:blank); background-attachment:fixed; } *html menu{ position:absolute; top:expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px'); }

查看全部

0 采集收起来源：特效介绍
2016-04-26
spring_summer

IETester包含多个版本的IE，可以方便的用来进行兼容性测试。

查看全部

0 采集收起来源：练习题
2014-12-16
spring_summer

jQuery的offset()方法会返回一个对象，包含top和left属性。

查看全部

0 采集收起来源：练习题
2014-12-16
spring_summer

使用锚点可以在文档中设置标记，这些标记通常放在文档的顶部。

查看全部

0 采集收起来源：练习题
2014-12-16
spring_summer

特效设计技术点：（1）锚点(anchor)：锚点是网页制作中超链接的一种，又叫命名锚记。锚点是一种页面内的超级链接。（2）关于滚动条定位的事件和方法(借助jquery) 特效所需要掌握的技术点： scroll([data],fn)：当用户滚动指定的元素时，会发生scroll事件。 scroll事件适用于所有可滚动的元素和window对象(浏览器窗口)。例如：当页面滚动条变化时，执行函数......： $(window).scroll(function(){/* ...... */}); scrollTop([val])：获取/设置匹配元素相对滚动条顶部的偏移。 offset()：获取匹配元素的相对偏移。返回的对象包含两个整形属性：top和left，以像素计。

查看全部

0 采集收起来源：特效设计
2014-12-16