拖动的页面滚动导航固定上方

程序员文章站 2022-03-13 13:58:22

...

拖动的页面滚动导航固定上方
拖动的页面滚动导航固定上方


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .bg-img{
            background: url("http://9yin2.woniu.com/static/web201703/images/bg.jpg")  center top repeat;
            width: 100%;
            height: 1080px;
        }

        .top-p{
            width: 100%;
            height: 130px;
            background: rgba(30, 33, 35,0.8);

        }

        .w-100{
            width: 100%;
        }

        .op-02{
            opacity: 0.2;
        }

        .white{
            color: white;
        }

        .d-flex{
            display: flex;
        }

        .just-btw{
            justify-content: space-between;
        }
        .just-round{
            justify-content: space-around;
        }
        .just-center{
            justify-content: center;
        }

        .pd-1{
            padding: 5px;
        }

        .pd-2{
            padding: 10px;
        }

        .pd-3{
            padding: 15px;
        }

        .pd-4{
            padding: 20px;
        }

        .pd-5{
            padding: 25px;
        }

        .pd-6{
            padding: 30px;
        }


        .mr-1{
            margin: 5px;
        }

        .mr-2{
            margin: 10px;
        }

        .mr-3{
            margin: 15px;
        }

        .mr-4{
            margin: 20px;
        }

        .mr-5{
            margin: 25px;
        }

        .mr-6{
            margin: 30px;
        }

        .f-size-14{
            font-size: 14px;
        }

        .f-size-16{
            font-size: 16px;
        }

        .f-size-18{
            font-size: 18px;
        }

        .f-size-20{
            font-size: 20px;
        }

        .f-size-12{
            font-size: 12px;
        }

        .cursor{
            cursor:pointer;
        }

        .inde{
            z-index: -1;
        }

        .new-box{
            width: 100%;
            height: 1072px;
            display: block;
            background: url("http://9yin2.woniu.com/static/web201703/images/p2_bg.jpg") center top repeat;
        }

        .feature-box{
            width: 100%;
            height: 1113px;
            background: url("http://9yin2.woniu.com/static/web201703/images/p3_bg.jpg") center top repeat;
        }

        .w-1200{
            width: 1200px;

        }

        .m-center{
            margin: 10px auto;

        }
        .pos-abv{
            position: absolute;
        }
    </style>
</head>
<body>
<div id="top"><img src="http://9yin.woniu.com/static/web201588/images/bg.jpg?v1" alt=""></div>

<section class="pos-abv w-100" id="nav">
    <div class="d-flex just-btw w-100 top-p">
        <div><img src="http://9yin2.woniu.com/static/web201703/images/logo.png" alt=""></div>
        <div class="d-flex  just-round f-size-18 white">
            <div class="mr-4 cursor">
                <p class="">官网首页</p><p>HOME</p>
            </div>
            <div class="mr-4 cursor">
                <p>新闻资讯</p><p>NEWS</p>
            </div>
            <div class="mr-4 cursor">
                <p>研发手札</p><p>DEV SKETCH</p>
            </div>
            <div class="mr-4 cursor">
                <p>官方论坛</p><p>FORUM</p>
            </div>
            <div class="mr-4 cursor">
                <p>蜗牛游戏</p><p>GAME</p>
            </div>
        </div>
    </div>
    <div>
        <div>
            <img src="http://9yin2.woniu.com/static/web201703/images/slogan.png" alt="">
        </div>
    </div>
</section>

<div id="myMain">
    <section class="bg-img"></section>
<section class="new-box">
    <div class="w-1200 m-center pd-6">
        <img src="https://img.php.cn/upload/image/136/485/911/1638173810418146.gif" alt="">
    </div>
</section>

<section class="feature-box">
<div class="w-1200 m-center pd-6 w">
    <img src="https://img.php.cn/upload/image/407/312/793/1638173840327201.gif" alt="">
</div>
</section>
</div>

<script>
window.onload = function (){
    var top =document.getElementById('top')
    var myMain =document.getElementById('myMain')

    var nav = document.getElementById('nav')

     window.onscroll = function (){

        if (document.documentElement.scrollTop>=top.offsetHeight){
            nav.style.cssText="position:fixed;top:0px;";
        }else {
            nav.style.cssText="position:static;";
            myMain.style.marginTop ='0px';
        }

     }
}


</script>
</body>
</html>

图片占位
拖动的页面滚动导航固定上方

上一篇： js对象模拟数组

下一篇： JS操作DOM，两个简单的小案例

拖动的页面滚动导航固定上方

Axure怎么制作页面滚动时菜单固定在顶部的页面？

基于jquery固定于顶部的导航响应浏览器滚动条事件

解决Vue页面固定滚动位置的处理办法

vue使用原生js实现滚动页面跟踪导航高亮的示例代码

javascript - wordpress侧边导航栏高度不够时随页面滚动是怎么实现的？

基于jquery固定于顶部的导航响应浏览器滚动条事件

解决Vue页面固定滚动位置的处理办法

页面上下滚动改变顶部导航的定位方式

页面上下滚动改变顶部导航的定位方式

顶部有个固定的导航栏，页面内定位时怎么定在导航栏下面。_html/css_WEB-ITnose

拖动的页面 滚动导航固定上方

Axure怎么制作页面滚动时菜单固定在顶部的页面？

基于jquery固定于顶部的导航响应浏览器滚动条事件

解决Vue页面固定滚动位置的处理办法

vue使用原生js实现滚动页面跟踪导航高亮的示例代码

javascript - wordpress侧边导航栏高度不够时随页面滚动是怎么实现的？

基于jquery固定于顶部的导航响应浏览器滚动条事件

解决Vue页面固定滚动位置的处理办法

页面上下滚动改变顶部导航的定位方式

页面上下滚动改变顶部导航的定位方式

顶部有个固定的导航栏，页面内定位时怎么定在导航栏下面。_html/css_WEB-ITnose

拖动的页面滚动导航固定上方