jQuery实现网页顶部导航栏置顶

本个案例其实也是障眼法。已经先是应用fixed。后边的元素可以使用 margin-top 防止被 header挡住。或者一个轮播图广告作为背景也可以。

image.png
image.png

css

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}
header nav {
    background: none;
    box-shadow: none;
    height: 80px;
}
header .top-nav-collapse {
    background: #FFFFFF;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    transition: all .3s ease-in-out;
}

js

 $(window).scroll(function () {
        if ($("header").offset().top > 50) {
            $("nav").addClass("top-nav-collapse");
        } else {
            $("nav").removeClass("top-nav-collapse");
        }
    });

html

<header>
        <nav class="">
            
        </nav>
    </header>