固定导航栏 - - php中文网博客

首页 > 博客列表 > 固定导航栏

博主信息

博文 8

粉丝 0

访问量 6684

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

固定导航栏

风轻云淡

原创

680人浏览过

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>固定导航栏</title>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    #nav{
        position: absolute;
    }
    .img{
        width: 1500px;
        position: absolute;
    }
    div{
        height: 500px;
        width: 1000px;
        margin: 0 auto;
    }
    .box1{
        background-color: red;
    }
    .box2{
        background-color: pink;
    }
    .box3{
        background-color: darkcyan;
    }
</style>
</head>
<body>
<nav id="nav">
    <img class="img" id="img" src="project/img/nav.png">
</nav>
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<script>
    var oimg=document.getElementById('img')
     window.onscroll= function (){
        var ox= document.documentElement.scrollTop
        var oy= document.documentElement.scrollLeft
        oimg.style.top=ox+'px'
        oimg.style.left=oy+'px'
    }
</script>
</body>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

HTML 练习

2021-11-10 14:33:18