页面滚动后，导航改变样式

当页面发生滚动后，头部导航样式发生改变。
HTML

<div id="pc_header" class="pc_header">
	<div class="pcHeader_box">
		<div class="header_top">
			<div class="headerTop_box">
				<div class="header_logo">
					<a href="/">
						<img class="logo" src="img/logo_home.png" alt="{dede:global.cfg_webname/}">
					</a>
				</div>
				<div class="header_contact">
					<div class="tel">
						<a href="tel:65 67105808">
							<img src="{dede:global.cfg_templets_skin/}/img/icon/tel.png" />
							<span>+65 67105808</span>
						</a>
					</div>
				</div>
			</div>
		</div>
		<div class="header_bottom">
			<div class="headerBottom_box">
				<div class="menu_box">
					<ul>
						<li class="menu_item">
							<a href="###" class="item_link">HOME</a>
						</li>
						<li class="menu_item">
							<a href="###" class="item_link">ABOUT UUCARE</a>
						</li>
						<li class="menu_item">
							<a href="###" class="item_link">CROWN</a>
						</li>
					</ul>
				</div>
				<div class="header_share">
					<div class="facebook">
						<a target="_blank" href="https://www.facebook.com"></a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

JS
利用scrollTop() 方法，判断页面的滚动偏移>0时，给div添加类名on，否则删除此类名。

$(document).ready(function() {
	$(window).scroll(function() {
		if($(document).scrollTop() > 0) {
			$('.pc_header').addClass('on');
		} else if($(document).scrollTop() == 0) {
			$('.pc_header').removeClass('on'); 
		}
	});
});

CSS
当页面的滚动偏移>0时，对页面布局作出相应的调整

#header #pc_header {
	width: 100%;
	display: block;
	position: fixed;
	z-index: 10;
	background-color: #fff;
}
.pcHeader_box {
	overflow: hidden;
	transition: all 0.5s;
}
.pc_header.on .pcHeader_box {
	width: 80%;
	min-width: 1150px;
	margin: 0 auto;
	transition: all 0.5s;
}
.header_top {
	width: 100%;
	float: left;
}
.pc_header.on .header_top {
	width: 13%;
}
.headerTop_box {
	height: 60px;
	width: 1150px;
	overflow: hidden;
	margin: 0px auto;
}
.pc_header.on .headerTop_box {
	width: 100%;
}
.header_top .header_logo {
	float: left;
}
.header_top .header_logo img {
	margin-top: 10px;
	max-height: 40px;
	transition: all 0.4s;
}
.pc_header.on .header_logo img {
	max-height: 35px;
}
.header_top .header_contact {
	float: right;
}
.pc_header.on .header_contact {
	display: none;
}
.header_top .header_contact>div {
	display: inline-block;
}
.header_top .header_contact .tel {
	padding-right: 30px;
	margin-right: 30px;
}
.header_top .header_contact>div img {
	width: 20px;
	margin-right: 5px;
	vertical-align: middle;
}
.header_top .header_contact>div span {
	color: #000;
	line-height: 60px;
}
.header_bottom {
	width: 100%;
	border-top: 1px solid #ccc;
	float: right;
}
.pc_header.on .header_bottom {
	width: 80%;
	border: 0;
}
.headerBottom_box {
	width: 1150px;
	height: 60px;
	margin: 0 auto;
	overflow: hidden;
}
.pc_header.on .headerBottom_box {
	width: 100%;
}
.header_bottom .menu_box {
	float: left;
}
.header_bottom .menu_box ul {
	display: flex;
	justify-content: space-between;
}
.header_bottom .menu_box .menu_item {
	text-align: center;
}
.header_bottom .menu_box .menu_item a {
	display: inline-block;
	font-size: 15px;
	color: #333;
	line-height: 60px;
	padding: 0 20px;
	display: block;
	width: 100%;
	height: 60px;
	position: relative;
}
.header_bottom .header_share {
	float: right;
	padding-top: 18px;
}
.header_bottom .header_share>div {
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 50%;
	margin-left: 5px;
	padding: 3px;
}
.header_bottom .header_share>div a {
	display: block;
	width: 20px;
	height: 20px;
	transition: all 0.5s;
}
.header_bottom .facebook a {
	background-image: url(../img/icon/header-share.png);
	background-repeat: no-repeat;
	background-position: -2px 0;
}

效果图如下：

• 滚动前：
  
• 滚动后：
  
  jq可在此下载：https://www.jb51.net/zt/jquerydown.htm
  如有错误请各位大神评论指教……