基于JQuery的业内导航

最新推荐文章于 2024-11-15 15:49:15 发布

梦想十八块腹肌

最新推荐文章于 2024-11-15 15:49:15 发布

阅读量99

点赞数

文章标签： jquery html5

本文链接：https://blog.csdn.net/qq_42468372/article/details/107644857

版权

效果

在这里插入图片描述

思路

晚些再整理，先记录一下

代码实现

css

<style>
    .product-overview-nav{
        visibility: hidden !important;
     }
    .pagenav_self {
        background: #FFFFFF;
        height: 50px;
        position: relative;
        display: none;
    }
    
    @media(max-width:768px) {
        .pagenav_self {
            display: none !important;
        }
    }
    
    .pagenav_self a {
        text-decoration: none;
        font-size: 14px;
        color: #252B3A;
        display: block;
    }
    
    .pagenav_contain {
        width: 100%;
        position: absolute;
        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.10);
        top: 0px;
        left: 0px;
        background: #FFFFFF;
        z-index: 2;
    }
    
    .pagenav_box {
        overflow: hidden;
        max-width: 1200px;
        font-size: 0;
        line-height: 50px;
        text-align: center;
        background-color: #fff;
        padding-inline-start: 0px;
        display: flex;
        margin: 0 auto;
        justify-content: center;
        white-space: nowrap;
        margin-left: -6px;
        position: relative;
        left: 50%;
        margin-left: -572px;
    }
    
    .pagenav_self.fixed .pagenav_contain {
        position: fixed;
        width: 100% !important;
    }
    
    .pagenav_item {
        position: relative;
        margin-right: 70px;
    }
    
    .pagenav_item::after {
        position: absolute;
        left: 0;
        bottom: 0px;
        content: '';
        width: 100%;
        height: 3px;
        background-color: transparent;
    }
    
    .pagenav_item.active::after {
        background-color: #f66f6a;
    }
    
    .pagenav_item.active {
        font-weight: bold;
    }
    
    @media (max-width: 1279px) {
        .por-container {
            padding-left: 0px;
        }
    }
    /*去除768~1200页内导航*/
    
    @media screen and (min-width:768px) and (max-width:1200px) {
        #pagenav_self .pagenav_box>li:first-child {
            margin-left: 0 !important;
        }
        #pagenav_self .pagenav_item {
            margin: 0 auto;
        }
        #pagenav_self .pagenav_box {
            padding-left: 3%;
        }
    }
</style>

html



<div class="pagenav_self" id="pagenav_self">
    <div class="pagenav_contain">
        <ul class="pagenav_box">
            <li class="pagenav_item active"><a href="#section-0">共建鲲鹏产业生态</a></li>
            <li class="pagenav_item"><a href="#section-1">相关子计划</a></li>
            <li class="pagenav_item"><a href="#section-2">公共权益项</a></li>
            <li class="pagenav_item"><a href="#section-3">鲲鹏生态伙伴之旅</a></li>
            <li class="pagenav_item"><a href="#section-4">合作伙伴</a></li>
         </li>
        </ul>
    </div>
</div>

JS

<script>
    $(document).ready(function() {
        $(window).scroll(function() {
            var distance = document.body.scrollTop || document.documentElement.scrollTop;
            $('.pagenav_item').each((index, el) => {
                el.className = 'pagenav_item';
                if (index == $('.pagenav_item').length - 1) {
                    if (distance >= $($(el.children[0]).attr("href")).offset().top) {
                        $(el).addClass('active')
                    }
                } else if (distance >= $($(el.children[0]).attr("href")).offset().top && distance < $($(el.nextElementSibling.children[0]).attr("href")).offset().top) {
                    $(el).addClass('active')
                }
            });
            if (distance > 505) {
                $('#pagenav_self').addClass('fixed');
                $('.pagenav_self').css('display', 'block');
            } else {
                $('#pagenav_self').removeClass('fixed')
                $('.pagenav_item')[0].className = 'pagenav_item active';
                $('.pagenav_self').css('display', 'none');
            }
        });

        $('.pagenav_item').click(function() {
            var hs_hight = $($(this).children().attr("href")).offset().top;
            $("html, body").animate({
                scrollTop: hs_hight + 5 + "px"
            }, 300);
            return false;
        });
    });
</script>