拖动的页面滚动导航固定上方 - HTML学习

首页 > 博客列表 > 拖动的页面滚动导航固定上方

博主信息

博文 14

粉丝 0

访问量 11590

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

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

「flasky」

原创

767人浏览过

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

<!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>

图片占位

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

HTML标签与markdown语法学习

2021-11-11 13:34:05