导航栏缩进

最新推荐文章于 2022-07-24 21:35:30 发布

fanrax

最新推荐文章于 2022-07-24 21:35:30 发布

阅读量779

点赞数

分类专栏： jsdemo 文章标签：导航栏缩进

本文链接：https://blog.csdn.net/qq_41925937/article/details/80902731

版权

jsdemo 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        p{
            background:greenyellow;
            color:red;
            font-size:30px;
        }
        #one{
            height:200px;
            background:green;
        }
        #two{
            height:100px;
            background:blue;
            width:100%;
            position: relative;
        }
    </style>
</head>
<body style="height:5000px;">
<div id="one">1</div>
<div id="two">2</div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<script>
    window.onscroll=function(){
        var oTwo=document.getElementById("two");
        if(document.documentElement.scrollTop>200||document.body.scrollTop>200){
            oTwo.style.position="fixed";
            oTwo.style.top="0px";
        }else if(document.documentElement.scrollTop<200||document.body.scrollTop<200){
            oTwo.style.position="relative";
        }
    }
</script>
</body>
</html>