<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="scrollto,jquery" />
<meta name="description" content="Helloweba演示平台，演示XHTML、CSS、jquery、PHP案例和示例" />
<title>滚轮滚动一定距离触发导航顶部固定，且所点击的关键词，背景字体变色</title>
<style type="text/css">
/* 固定导航 */
.x_menu{
background: #fff;
padding:10px 0;
100%;
z-index: 1;
}
.x_menu ul li{float:left;margin-right:15px;list-style:none}
.x_menu ul li a{
110px;
height: 40px;
text-align: center;
line-height: 38px;
font-size: 20px;
border:1px solid #3daf36;
color: #3daf36;
border-radius: 30px;
display: inline-block;
text-decoration: none;
margin-right: 5px;
}
.x_menu ul li a:hover{background: #3daf36;color: #fff;}
.x_on{
background: #3daf36;
color: #fff!important;
}
.x_fixed{position: fixed;top: 0;border-bottom: 1px solid #3daf36;}
</style>
</head>
<body>
<div style="100%;background:pink;height:700px;"></div>
<div class="x_menu">
<div class="container">
<ul class="list-inline">
<li><a class="x_on x-cpts" href="#x-cpts">产品特色</a></li>
<li><a class="x-shfw" href="#x-shfw">售后服务</a></li>
<li><a class="x-yhzc" href="#x-yhzc">用户支持</a></li>
<li><a class="x-khal" href="#x-khal">客户案例</a></li>
<li><a class="x-cpzx" href="#x-cpzx">产品资讯</a></li>
<li><a class="x-gyxz" href="#x-gyxz">关于心智</a></li>
<li><a class="x-xgtj" href="#x-xgtj">相关推荐</a></li>
<li><a class="x-lxwm" class="nomargin" href="#x-lxwm">联系我们</a></li>
</ul>
</div>
</div>
<div style="height:700px;"></div>
</body>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.scrollTo.js"></script>
<script type="text/javascript">
//导航选中背景变色
$('.x_menu ul li a').click(function(){
$(this).addClass('x_on').parent().siblings().find('a').removeClass('x_on');
});
//固顶
$(window).scroll(function() {
var top = $(window).scrollTop();
if(top>=450){
$(".x_menu").addClass("x_fixed");
}else{
$(".x_menu").removeClass("x_fixed");
}
});
</script>
</html>