固定导航条效果开发

  • A+
所属分类:前端技术
摘要

固定导航条效果开发

固定导航条效果开发,先看看看效果:

固定导航条效果开发

简要脚本

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

 

  • 我的微信
  • 加我请备注缘由
  • weinxin
  • 我的微信公众号
  • 轻松随便关注
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

关闭震动

目前评论:2   其中:访客  2   博主  0

    • avatar 巴啦宝贝 0

      因为数据丢失,麻烦删掉春熙路博客的链接,麻烦啦!

      • avatar 新闻 0

        文章不错非常喜欢