固定导航栏案例

复习 jQuery操作DOM

选择器

基本选择器：#id 、.class 、element、* 、
层级选择器：空格、>、+、~
- 基本过滤选择器：:first、:last、:eq(index)、:lt(index)、:gt(index)、:odd、:even
- 筛选选择器：.eq(index)、.children()、.parent()、.siblings()、.find()
动画：show、hide、fadeIn、fadeOut、fadeTo、slideDown、slideUp、slideToggle、animate
DOM操作：.css()、addClass(“className”)、removeClass()、toggleClass、attr()、removeAttr()、.val()、.html(“
”)、text()、node.append(“< p >我是追加的内容
”)、prePend()

一坐标值




    
    Title
    
    
    





top:
Left:

 
    我是div的子元素p

1 高度和宽度

$(“div”).height(); // 高度
$(“div”).width(); // 宽度

.height()方法和.css(“height”)的区别：
返回值不同，.height()方法返回的是数字类型(20)，.css(“height”)返回的是字符串类型(20px)，因此.height()方法常用在参与数学计算的时候
2 坐标值

$(“div”).offset(); // 获取或设置坐标值设置值后变成相对定位
$(“div”).position(); // 获取坐标值子绝父相只能读取不能设置

二获取滚动条位置




    
    Title

1 滚动条（滚动事件）

$(“div”).scrollTop(); // 相对于滚动条顶部的偏移
$(“div”).scrolllLeft(); // 相对于滚动条左部的偏移

三固定导航栏





    
    防腾讯固定导航栏
    
    
    



    ![](imgs/top.png)


    ![](imgs/nav.png)



    ![](imgs/main.png)

思路
1 获取顶部top的高度值
2 监听浏览器的滚动时间
1）判断一下 docScrollTOp 和 topHeight两个大小
2）文档被卷去的高度大于或等于 top高度的时候
3）让导航栏变成固定定位
4）当到达topHeight高度时，会跳出，为避免，设置主内容css上边距为导航栏高度
3 当返回时，让固定导航栏变为默认状态 position: static，并去掉设置的主内容上边距
四两侧跟随的广告





    
    
    
    
    


![](imgs/101.gif)
![](imgs/102.gif)
我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

我们的开始，是很长的电影

思路
监听浏览器的滚动事件，设置自定义动画top值为获取到得上边距+值
五 jQuery事件
click/mouseenter/blur/keyup
// 绑定事件
bind：$node.bind(“click”,function(){});
// 触发一次
one : $node.one(“click”,function(){}); delegate : $node.delegate(“p”,”click”,function(){}); on： $node.on(“click”,”p”,function(){});
解绑
unbind、undelegate off
触发
click : $(“div”).click(); trigger：触发事件，并且触发浏览器默认行为 triggerHandler：不触发浏览器默认行为

jQuery事件对象介绍
event.stopPropagation() //阻止事件冒泡 event.preventDefault(); //阻止默认行为

固定导航栏案例

你可能感兴趣的:(固定导航栏案例)