固定导航栏案例

作者: 常威爆打来福 | 来源:发表于2017-07-18 18:03 被阅读0次

复习 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(); //阻止默认行为

固定导航栏案例

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

程序员