js 使导航栏始终位于顶部

最新推荐文章于 2025-05-23 14:15:04 发布

羽雒星辰

最新推荐文章于 2025-05-23 14:15:04 发布

阅读量1.3k

点赞数

文章标签：导航栏顶部导航栏固定顶部

本文提供了一段关于网页导航栏的HTML与JavaScript代码实例。该导航栏具备响应式设计，并能在页面滚动超过一定距离时固定显示。代码中包含了多个菜单项，如首页、新闻中心等，每个菜单项通过点击事件实现页面跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如下：

<div class="menuEn" id="navigation" style="width: 100%">
    <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
        <div class="logoBlock center-block" id="menu">
            <ul class="nav nav-pills" id="navigationBar" style="position:relative;z-index: 502;margin-left: 140px">
                <li class="select" id="index"><a href="#" class="firstButton" onclick="setSrc('index.html')">首页</a></li>
                <li id="about"><a href="#" class="otherButton" onclick="setSrc('about.html')">新闻中心</a></li>
                <li id="trademark"><a href="#" class="otherButton" onclick="setSrc('trademark.html')">维权服务</a></li>
                <li id="brand"><a href="#" class="otherButton" onclick="setSrc('brand.html')">企卫App</a></li>
                <li id="research"><a href="#" class="otherButton" onclick="setSrc('research.html')">精英团队</a></li>
                <li id="news"><a href="#" class="otherButton" onclick="setSrc('news.html')">关于我们</a></li>
                <li id="contact"><a href="#" class="firstButton" onclick="setSrc('contact.html')">公告</a></li>
                <li id="test"><a href="#" class="otherButton" onclick="setSrc('contact.html')">产品检测</a></li>
            </ul>
        </div>
    </div>
    <script>
        window.onscroll=function(){
            var topScroll = $(document).scrollTop();//滚动的距离,距离顶部的距离
            var bignav  = document.getElementById("navigation");//获取到导航栏id
            if(topScroll > 190){  //当滚动距离大于190px时执行下面的东西
                bignav.style.position = 'fixed';
                bignav.style.top = '0';
                bignav.style.zIndex = '9999';
            }else{//当滚动距离小于190的时候执行下面的内容，也就是让导航栏恢复原状
                bignav.style.position = 'static';
            }
        }
    </script>
</div>