固定导航栏案例

复习 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(“<p></p>”)、text()、node.append(“< p >我是追加的内容</p>”)、prePend()

一坐标值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .div1{
            position: relative;
            top: 100px;
            width: 400px;
            height: 300px;
            left: 200px;
            background-color: red;
        }
        p{
            background-color: #dddddd;
            padding-left: 0px;
        }
        div2{

        }
    </style>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //相对页面
            $("button").eq(0).click(function () {
               console.log( "距离页面上部距离："+$("div").offset().top);
                console.log( "距离页面左边距离"+$("div").offset().left);

            });
            //获取相对于父元素
            $("button").eq(1).click(function () {
               console.log("相对父元素的上边距"+$("p").position().top);
               console.log("相对父元素的做边距"+$("p").position().left);
            });
            //设置offset
            $("button").eq(2).click(function () {
               var txtTop=$("#txtTop").val();
               var txtLeft=$("#txtLeft").val();
               $("div").offset({
                  top:txtTop,
                   left:txtLeft
               });
            });
        });
    </script>
</head>
<body>
<button >获取offset坐标值</button>
<button >获取position坐标值</button>
<button >设置position坐标值</button>
<label for="txtTop">top:</label><input type="text" ID="txtTop">
<label for="txtLeft">Left:</label><input type="text" id="txtLeft">
<div class="div1">
 <div class="div2">
    <p>我是div的子元素p</p>
 </div>
</div>
</body>
</html>

1 高度和宽度

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

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

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

二获取滚动条位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 300px;
            height: 300px;
            overflow: scroll;
            background-color: pink;
        }
        div p{
            width: 500px;
            height: 2000px;
        }

    </style>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("button").eq(0).click(function () {
               console.log($("div").scrollTop());
               console.log($("div").scrollLeft());
            });
        });
    </script>
</head>
<body>
<button>获取滚动条位置</button>
<div>
<p>
</p>
</div>
</body>
</html>

1 滚动条（滚动事件）

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

三固定导航栏


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>防腾讯固定导航栏</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .main{
            width: 1000px;
            margin:0 auto;
            /*margin-top: 20px;*/
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //获取顶部top的高度值
            var topHeight=$(".top").height();
            //监听浏览器的滚动时间
            // 判断一下 docScrollTOp 和 topHeight两个大小
            // 文档被卷去的高度 大于或等于 top高度的时候
            // 让导航栏变成固定定位

            $(window).scroll(function () {
            var docScroll=$(document).scrollTop();
            if (docScroll >= topHeight){
                $(".nav").css({
                    "position": "fixed",
                    "top": 0
                });
                $(".main").css("margin-top",$(".nav").height());
            }else {
                $(".nav").css({
                    // 让固定导航栏变为默认状态 position: static

                    "position": "static"
                });
                $(".main").css("margin-top" ,0);
            }
            });

        });
    </script>
</head>
<body>
<div class="top">
    ![](imgs/top.png)
</div>
<div class="nav">
    ![](imgs/nav.png)

</div>
<div class="main">
    ![](imgs/main.png)
</div>
</body>
</html>

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


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .left, .right {
            position: absolute;
            top: 80px;
        }

        .left {
            left: 0;
        }

        .right {
            right: 0;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(window).scroll(function () {
                var docScrollTop = $(document).scrollTop();

                //$(".main").css("top", docScrollTop + 80);
                $(".main").animate({
                    "top" : docScrollTop + 80},30);
            });
        });
    </script>
</head>
<body>
<div class="left main">![](imgs/101.gif)</div>
<div class="right main">![](imgs/102.gif)</div>
<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>

<p>我们的开始，是很长的电影</p>
</body>
</html>

思路
监听浏览器的滚动事件，设置自定义动画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(); //阻止默认行为

最后编辑于：2017.12.09 00:49:23

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,491评论 5赞 459
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,856评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,745评论 0赞 319
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,196评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,073评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,112评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,531评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,215评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,485评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,578评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,356评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,215评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,583评论 3赞 299
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,898评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,174评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,497评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,697评论 2赞 335

固定导航栏案例

推荐阅读更多精彩内容