定位导航

html

    <div class="cate">

        <div class="category">

            <div class="category-menu w12" id="navigation">

                <ul class="category-sticky-menu">

                    <li><a href="#box-1" class="category-menu--item active">公司介绍</a></li>

                    <li><a href="#box-2" class="category-menu--item">企业文化</a></li>

                    <li><a href="#box-3" class="category-menu--item">荣誉奖项</a></li>

                    <li><a href="#box-4" class="category-menu--item">加入我们</a></li>

                    <li><a href="#box-5" class="category-menu--item">联系我们</a></li>

                </ul>

            </div>

        </div>

    </div>

    <div style="height: 800px; border: 1px solid red; padding: 100px 0; position: relative;" id="box-1">

        123

    </div>

    <div style="height: 800px; border: 1px solid orange; padding: 100px 0; position: relative;" id="box-2">

        456

    </div>

    <div style="height: 800px; border: 1px solid rgb(49, 47, 139); padding: 100px 0;" id="box-3">

        789

    </div>

    <div style="height: 800px; border: 1px solid rgb(118, 118, 133); padding: 100px 0;" id="box-4">

        11 121

    </div>

    <div style="height: 800px; border: 1px solid rgb(118, 118, 133); padding: 100px 0;" id="">

        11 121

    </div>

 

css

.cate {

    height: 54px;

}

.category {

    background: #ffffff;

    width: 100%;

    left: 0;

    top: 85px;

}

.category-menu {

    text-align: center;

    min-width: inherit;

    position: relative;

    width: 610px;

}

.category-menu:before {

    left: 0;

}

.category-menu:after {

    right: 0;

}

.category-menu:before,

.category-menu:after {

    z-index: 3;

    width: 50px;

    position: absolute;

    content: '';

    top: 0;

    height: 100%;

}

.category-menu li a {

    padding: 0 25px;

    border: 1px solid #fff;

    display: inline-block;

    height: 30px;

    line-height: 28px;

    background: #fff;

    color: #222;

    border-radius: 5px;

}

.category-menu li {

    margin: 0 2px;

    display: inline-block;

    font-size: 14px;

}

.category-menu:before {

    background: url(../img/about/sticky-menu-left.svg);

}

.category-menu:after {

    background: url(../img/about/sticky-menu-right.svg);

}

.category-menu:before,

.category-menu:after {

    background-size: auto 100%;

}

.category-menu:before {

    left: -45px;

    background-position: left center;

}

.category-menu:after {

    right: -45px;

    background-position: right center;

}

.category-sticky-menu {

    padding: 12px 0;

}

.category-sticky-menu {

    background: transparent -webkit-gradient(linear, left top, left bottom, from(#0d2e40), color-stop(61%, #25495b), to(#416477)) 0% 0% no-repeat padding-box;

}

.category.active {

    position: fixed;

    z-index: 8;

    background: none;

}

.category-menu .active {

    background: #35a8db;

    color: #fff;

}

 

js

<script>

    if ($('.cate').length > 0) {

        var thisclass = $('.category');

        var thispar = $('.cate');

        addEvent(window, 'scroll', function () {

            var category = thispar.offset().top;

            var xflmnavjs2 = $(window).scrollTop();

            if (xflmnavjs2 > category) {

                thisclass.addClass('active');

            }

            else {

                thisclass.removeClass('active');

            }

        });

    }

    $('#navigation').navScroll({

        mobileDropdown: true,

        mobileBreakpoint: 768,

        scrollSpy: true

    });

 

</script>

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

<script type="text/javascript" src="js/navScroll.js"></script>