定位导航

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>
 

 

 

posted @ 2023-03-21 10:57  阳菜  阅读(26)  评论(0)    收藏  举报