js实现导航条置顶

￡神魔★判官ぃ 2022-01-28 00:23 256阅读 0赞

## 导航条置顶 ##

<ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li class="top"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

* {
                padding: 0;
                margin: 0;
            }
    
            ul li {
                list-style: none;
            }
            .top {
               
                height: 100px;
                background-color: red;
            }
            li {
                width: 100%;
                height: 100px;
                background-color: pink;
                margin-bottom: 20px;
            }

var oUl=document.getElementsByTagName('ul')[0];
        var otop = document.getElementsByClassName('top')[0];
        var navh = otop.offsetTop;
          //2.添加滚动事件，如果滚动的距离大于等于pingjia的div到body的距离，就可以一直停在顶部
        window.onscroll = function () {   
            var top1 = document.documentElement.scrollTop || document.body.scrollTop;
            if (top1 >= navh) {
                otop.style.position = 'fixed';
                otop.style.top = '0';
            } else {
                otop.style.position = 'relative';
            }
        }

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20220128/27ff84e5542e480b9154a0c646293cad.png

发表评论取消回复

表情：

评论列表（有 0 条评论，256人围观）

还没有评论，来说两句吧...

相关阅读

相关该置顶的文章还是要置顶

1、为了整理系列性的文章，开通了个人博客，有需要的关注下，博客地址“[www.xbeichenbei.com][]”。 ![watermark_type_ZmFuZ3po

朱雀/ 2023年07月05日 14:45/ 0 赞/ 144 阅读

相关页面缓慢置顶 html+css+js

效果（后面有源码）： ![在这里插入图片描述][2021032621273466.gif_pic_center] 这是一个很简单的页面置顶按钮，点击后页面置顶。

布满荆棘的人生/ 2022年11月13日 12:24/ 0 赞/ 204 阅读

相关 html5 导航栏置顶,html5导航栏横向

html5中怎么样让导航条完全的横向100%显示，附图你里面是不是还有内嵌标签设置了宽度。请注意以下几点一：只能用HTML5 + CSS 二：要保证在不同页面跳转的时候

小灰灰/ 2022年10月05日 10:51/ 0 赞/ 251 阅读

相关 html最佳实践－CSS置顶，JS置尾

在极端的情况，比较下面这段html代码： <script> //很多js代码 </script> <body> //很多html代码 </body>

心已赠人/ 2022年08月07日 04:38/ 0 赞/ 192 阅读

相关水平导航条实现总结

首先最终实现的图如下: ![Center][] html代码如下： <span style="font-size:14px; font-family:

分手后的思念是犯贱/ 2022年08月05日 13:27/ 0 赞/ 167 阅读

相关 js、jquery菜单导航条

漂亮的导航条 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

怼烎@/ 2022年05月09日 10:33/ 0 赞/ 252 阅读

相关 jQuery置顶导航

Html的代码 <body> <div class="logo_bar">顶部 logo</div> <div class="menu">置顶

一时失言乱红尘/ 2022年02月02日 19:21/ 0 赞/ 284 阅读

相关 js实现导航条置顶

导航条置顶 <ul> <li></li> <li></li> <li></li>

￡神魔★判官ぃ/ 2022年01月28日 00:23/ 0 赞/ 257 阅读

相关 [置顶] 提升代码内外部质量的22条经验

本文主要关注代码的内部和外部质量，编程的价值观，代码质量的评估标准，整洁代码的匠艺以及如何维护已有的代码。外部质量：用户所能感受到的部分，正确性，易用性，效率，可靠性。

柔光的暖阳◎/ 2021年12月13日 22:37/ 0 赞/ 261 阅读

相关微信小程序导航tab切换，跟随滚动置顶

<view class="small_nav { {tabFixed?'small_navFix':''}}" id="tab-con">

àì夳堔傛蜴生んèń/ 2021年09月30日 16:40/ 0 赞/ 429 阅读