原生javaScript实现的楼层导航位置定位

话不多说，直接上代码

html部分：

css部分：

js部分：

// 获取导航栏到屏幕顶部的距离

        var oTop = $(".stairsNav").offset().top;

        var sTop = 0;

        // 监听页面的滚动

        $(window).scroll(function () {

            var windowWidth = document.documentElement.clientWidth

            // 判断当前浏览器的宽度， 为1263的时候 位置稍作改变

            if (windowWidth < 1300 && windowWidth > 1200) {

                $(".stairsNav").css({ "margin-left": "-630px", "display": "block" });

            } else if (windowWidth > 1300) {

                $(".stairsNav").css({ "margin-left": "-680px", "display": "block" });

            } else if (windowWidth < 1200) {

                $(".stairsNav").css({ "display": "none" });

            }

            // 获取页面向上滚动的距离

            sTop = $(this).scrollTop();

            // 当导航栏到达屏幕顶端

            if (sTop >= oTop) {

                // 修改导航栏position属性，使之固定在屏幕顶端

                $(".stairsNav").css({ "position": "fixed", "top": "0" });

            } else {

                // 当导航栏脱离屏幕顶端时，回复原来的属性

                $(".stairsNav").css({ "position": "absolute","top": "390px" });

            }

        });

首先导航 肯定是要先 以content为相对的绝对定位，定位好位置，当鼠标滑轮滑动到，计算导航于页面顶端的距离，导航到达屏幕顶端的时候，将导航改为 以浏览器为相对的固定定位就好了。

其中这段代码是根据浏览器当前的分辨率改变导航的位置的

成果图：

没到达顶端 到达顶端后