進入頁面的樣式
鼠標向下的樣式
滾輪向上還是可以變大，直接上代碼，
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>鼠標滾動放大縮小導航欄代碼</title>
<meta charset="utf-8">
<style>
* { 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;}
</style>
</head>
<body class="menu">
<div class="header large">
<div class="inner">
<!-- <h1><a href="#"><img src="images/logo.png" alt="logo"></a></h1> -->
<ul class="nav">
<li><a class="cur" href="#" title="首頁">首頁</a></li>
<li><a href="#" title="詳情">詳情</a></li>
<li><a href="#" title="可以得">可以得</a></li>
<li><a href="#" title="阿西吧">阿西吧</a></li>
</ul>
</div>
</div>
<div class="section">
<p style="margin-top: 300px; text-align: center; color: #f50;">鼠標向下滾動查看菜單變化</p>
</div>
<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function(){
$(window).on('scroll', function(){
if($(window).scrollTop() > 100){
$('.header').removeClass('large').addClass('small');
} else {
$('.header').removeClass('small').addClass('large');
}
});
});
</script>
</body>