分享一个JQuery缩放菜单代码,当鼠标向下滚动的时候,菜单缩小,当回滚到顶部的时候,菜单恢复放大。后附演示实例,任刚(rengang.org)整理分享:
CSS部分:
* { margin: 0; padding: 0; } .menu .header { position: fixed; left: 0; top: 0; width: 100%; background-color: #323436; } .menu .inner { width: 1000px; margin: 0 auto; overflow: hidden; zoom: 1; } .menu h1 { float: left; } .menu h1 img { display: block; border: 0; } .menu .nav { float: right; list-style-type: none; font-family: "Microsoft Yahei"; } .menu .nav li { float: left; margin-left: 5px; } .menu .nav a { float: left; color: #cecece; text-decoration: none; } .menu .nav a:hover { background-color: #555; } .menu .large .inner { padding: 20px 0; } .menu .large h1 img { height: 64px; } .menu .large .nav { padding-top: 10px; } .menu .large .nav a { height: 44px; padding: 0 20px; line-height: 44px; font-size: 18px; } .menu .small .inner { padding: 10px 0; } .menu .small h1 img { height: 34px; } .menu .small .nav { padding-top: 3px; } .menu .small .nav a { height: 28px; padding: 0 10px; line-height: 28px; font-size: 14px; } .menu .header, .menu .inner, .menu a, .menu img, .menu li { transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } .section { height: 1000px; }
HTML部分:
<body class="menu"> <div class="header large"> <div class="inner"> <h1><a href="https://www.rengang.com.cn/"><img src="images/logo.png" alt="logo"></a></h1> <ul class="nav"> <li><a href="https://www.rengang.com.cn/category/material/free-template">免费模板</a></li> <li><a href="https://www.rengang.com.cn/category/material/web-elements">网页素材</a></li> <li><a href="https://www.rengang.com.cn/category/material/ui-elements">UI素材</a></li> <li><a href="https://www.rengang.com.cn/category/material/free-icons">免费图标</a></li> <li><a href="https://www.rengang.com.cn/category/material/vector-graphics">矢量图形</a></li> <li><a href="https://www.rengang.com.cn/category/material/fonts-element">字体素材</a></li> </ul> </div> </div> <div class="section"> <p style="margin-top: 300px; text-align: center; color: #f50;">翻滚吧,牛宝宝!↓</p> </div>
JS部分:
<script src="https://www.rengang.com.cn/js/jquery-2.1.3.js"></script> <script> $(function(){ $(window).on('scroll', function(){ if($(window).scrollTop() > 100){ $('.header').removeClass('large').addClass('small'); } else { $('.header').removeClass('small').addClass('large'); } }); }); </script>" />