固定导航条效果开发

老虎说测试

1540
文章

263
评论

2018 年 11 月 18 日 07:53:30前端技术字数 701阅读2分20秒阅读模式2018 年 11 月 18 日

摘要固定导航条效果开发

固定导航条效果开发，先看看看效果：

文章源自陈学虎-https://chenxuehu.com/article/2018/11/7354.html

简要脚本文章源自陈学虎-https://chenxuehu.com/article/2018/11/7354.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定导航条效果开发</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <style type="text/css">
        *{padding: 0;margin: 0;}
        div{width: 960px;margin:0 auto;}
        #menu.fixtop{position: fixed;margin-left: -480px;left: 50%;top:0;}
    </style>
</head>
<body>
    <script type="text/javascript">
        $(window).scroll(function(){
            $(document).scrollTop() > 130 ? $("#menu").addClass('fixtop') : $("#menu").removeClass('fixtop') ;
        })
    </script>
    <div style="height: 100px;background: purple"></div>
    <div id="menu" style="height: 30px;background: #fcc"></div>
    <div style="height: 1200px;background: linear-gradient(orange, green, blue);"></div>
</body>
</html>

文章源自陈学虎-https://chenxuehu.com/article/2018/11/7354.html 文章源自陈学虎-https://chenxuehu.com/article/2018/11/7354.html