greenstuff
/
category.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>我要买菜-分类</title>
		<link rel="stylesheet" type="text/css" href="css/common/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/common/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/category/category.css"/>
	</head>
	<body>

		<div class="header">
			<div class="container">
				<div class="row">
					<div class="col-xs-4 text-left">
						<a href="#"><i class="iconfont">&#xe620;</i></a>
					</div>
					<div class="col-xs-4 text-center">
						<p class="title">分类</p>
					</div>
					<div class="col-xs-4 text-right">
						<a href="#"><i class="iconfont">&#xe606;</i></a>
					</div>
			    </div>
			</div>
		</div>
		<div class="container-fluid main d-scroll-wrap">
			<div class="row">
				<div class="col-xs-12 category-note">公告：本店将于2016-02-06至2016-02-17期间正常送货</div>
			</div>
			<div class="row category-con">
				<div class="col-xs-4 category-left">
					<ul class="nav nav-pills nav-stacked">
						<li class="current">抢购区</li>
						<li><a href="">蔬菜水果</a></li>
						<li>蔬菜水果</li>
						<li>蔬菜水果</li>
						<li>蔬菜水果</li>
						<li>蔬菜水果</li>
						<li>蔬菜水果</li>
						<li>蔬菜水果</li>
						<li>蔬菜水果</li>
						<li>蔬菜水果</li>
						<li>蔬菜水果</li>
						<li>蔬菜水果</li>
						<li>蔬菜水果</li>
						<li>蔬菜水果</li>
						<li>蔬菜水果</li>
						<li>蔬菜水果</li>
						<li>蔬菜水果</li>
						<li>蔬菜水果</li>
						<li>蔬菜水果</li>
						<li>蔬菜水果</li>
						<li>蔬菜水果</li>
					</ul>
				</div>
				<div class="col-xs-8 category-right">
					<ul class="list-group">
					  <li class="list-group-item"><a href="">抢购区一</a></li>
					  <li class="list-group-item">抢购区一</li>
					  <li class="list-group-item">抢购区一</li>
					  <li class="list-group-item">抢购区一</li>
					  <li class="list-group-item">抢购区一</li>
					  <li class="list-group-item">抢购区一</li>
					  <li class="list-group-item">抢购区一</li>
					  <li class="list-group-item">抢购区一</li>
					  <li class="list-group-item">抢购区一</li>
					  <li class="list-group-item">抢购区一</li>
					  <li class="list-group-item">抢购区一</li>
					  <li class="list-group-item">抢购区一</li>
					  <li class="list-group-item">抢购区一</li>
					  <li class="list-group-item">抢购区一</li>
					  <li class="list-group-item">抢购区一</li>
					  <li class="list-group-item">抢购区一</li>
					  <li class="list-group-item">抢购区一</li>
					  <li class="list-group-item">抢购区一</li>
					  <li class="list-group-item">抢购区一</li>
					  <li class="list-group-item">抢购区一</li>
					  <li class="list-group-item">抢购区一</li>
					  <li class="list-group-item">抢购区一</li>
					  <li class="list-group-item">抢购区一</li>
					  <li class="list-group-item">抢购区一</li>
					  <li class="list-group-item">抢购区一</li>
					</ul>
				</div>
			</div>
		</div>
		<footer>
			<ul class="footer clearfix">
				<li><a href="index.html"><i class="iconfont">&#xe601;</i><p>首页</p></a></li>
				<li class="selected"><a href="category.html"><i class="iconfont second">&#xe616;</i><p>分类</p></a></li>
				<li><a href="shopping_cart.html"><i class="iconfont">&#xe611;</i><p>购物车</p></a></li>
				<li><a href="#"><i class="iconfont">&#xe615;</i><p>充值有礼</p></a></li>
				<li><a href="user.html"><i class="iconfont">&#xe609;</i><p>我</p></a></li>
			</ul>
		</footer>
		<script src="js/common/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function(){
				var $current=$(".category-left .current");
				var h=$current.offset().top;
				$(window).scroll(function() {
		            if ($(window).scrollTop()+45 >= h) {
		                $current.addClass("nax-fixed");
		            } else {
		                $current.removeClass("nax-fixed");
		            }
		        });

				//设置高度
				$(window).resize(function() {
					var h = $(window).height() - $('.header').outerHeight(true) - $('.footer').outerHeight(true);
					$('.d-scroll-wrap').height(h);
					$('.category-con').height(h - $('.category-note').outerHeight(true));
				});
				$(window).trigger('resize');
			})
		</script>
	</body>
</html>