Menu Zoom – JQuery鼠标滚动缩放菜单特效代码 - 任刚 · Ren Gang - 我的设计笔记 世界设计 · 设计世界

分享一个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>
" /> jQuery · 任刚 · Ren Gang - 我的设计笔记

jQuery    517

Menu Zoom – JQuery鼠标滚动缩放菜单特效代码

小贴士      

网页设计:オウンドメディア・Webマーケティングを成功に導く「インフォバーン」

网页设计      

头像插件 SVG Acatars – Generator jQuery Integrated Script

插件      

Lettering.JS – 网页字体排版插件

插件      

Flickr Style Loading Animation Using JQuery – Flickr风格加载动画(Jquery)

插件      

Nivo Slider – 又一个jQuery图片轮播插件

工具      

Apple-like Retina Effect With jQuery - 网页放大镜插件

Apple-like Retina Effect With jQuery – 网页放大镜插件

插件      

jQuery 瀑布流图片相册布局源码

jQuery 瀑布流图片相册布局源码

源代码      

jQuery 加载进度条 - “Sonic – looping loaders”

jQuery 加载进度条 – “Sonic – looping loaders”

源代码      

登 录 注 册