JQuery-固定导航

固定导航

 <style>
        * {
            margin: 0;
            padding: 0
        }
        img {
            vertical-align: top;
            width: 100%;
        }
        .main {
            margin: 10px auto 0;
            width: 1000px;
        }
        .fixed {
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
    <script src="../js/jquery-1.12.4.js"></script>

 <div class="top" id="topPart">
        <img src="images/top.png" alt="" />
    </div>
    <div class="nav" id="navBar">
        <img src="images/nav.png" alt="" />
    </div>
    <div class="main" id="mainPart">
        <img src="images/main.png" alt="" />
    </div>

<script>
        $(function () {
            // 这个案例的关键还是在某个时候为某个元素添加固定定位的样式
            // 1.获取元素：顶部  + 导航块
            let $topPart = $('#topPart')
            let $navBar = $('#navBar')
            let $mainPart = $('#mainPart')
            // 2.获取顶部块的高度
            let topHeight = $('#topPart').height()
            // console.log(topPart);
            // 3.为window添加滚动事件
            $(window).scroll(function () {
                // 3.1 在事件中获取滚动出屏幕的距离
                let offset = $(window).scrollTop()
                // console.log(offset);
                // 3.2 判断如果超出top的高度，那么就为导航块添加样式
                if (offset >= topHeight) {
                    $navBar.addClass('fixed')
                    // 由于为导航块添加了定位，会造成导航块脱离标准文档流，不再占据页面空间，从而造成 $mainPart往上移，所以我们需要在添加定位样式之后，为 $mainPart设置样式，保持原有的位置参照
                    // 10是原始就有的边距
                    $mainPart.css({
                        marginTop: $navBar.height() + 10
                    })
                } else {
                    // 3.3 如果小于顶部高度，就应该移除样式
                    $navBar.removeClass('fixed')
                    // 由于为导航块添加了定位，会造成导航块脱离标准文档流，不再占据页面空间，从而造成 $mainPart往上移，所以我们需要在添加定位样式之后，为 $mainPart设置样式，保持原有的位置参照
                    $mainPart.css({
                        marginTop: 10
                    })
                }
            })
        })
    </script>