JQuery导航栏固定及回到顶部

JQuery导航栏固定及回到顶部

1.页面布局

  <div id="wrap">
        <div class="top">
            <h2>top</h2>
        </div>
        <div class="nav">
            <h2>nav</h2>
        </div>
        <div class="main">
            <h2>main</h2>
        </div>
        <div class="gotop">
            <img src="../images/gotop.png" alt="">
        </div>
</div>

2.css样式

<style>
        * { margin: 0; padding: 0; }

        #wrap { text-align: center; }

        #wrap .top { margin: 0 auto; width: 1423px; height: 168px; background: skyblue; }

        #wrap .nav { margin: 0 auto; width: 1423px; height: 120px; background: red; }

        #wrap .main { margin: 0 auto; width: 1423px; height: 2000px; background: skyblue; }

        #wrap .gotop { display: none; position: fixed; right: 40px; bottom: 50px; cursor: pointer; }

        #wrap .gotop img { height: 80px; }

        #wrap .fixed { position: fixed; left: 0; right: 0; top: 0; }
</style>

3.JS代码

  <script>
        $(function () {
            //在需要fixed固定定位的元素外包裹div，防止塌陷
            $(".nav").wrap("<div></div>");

            //窗口滚动，nav导航条固定
            $(window).on("scroll", function () {
                //滚动至nav的顶部时固定
                if ($(window).scrollTop() >= $(".top").height()) {
                    $(".nav").addClass("fixed");
                } else {
                    $(".nav").removeClass("fixed");
                }

                //回到顶部图标淡入
                if ($(window).scrollTop() >= 500) {
                    $(".gotop").fadeIn(1000);
                } else {
                    $(".gotop").fadeOut(1200);
                }

            });

            //回到顶部事件
            $(".gotop").on("click", function () {
                $("html,body").animate({
                    "scrollTop": "0px"
                }, 1000)
            });
        }); 
    </script>