网页头部导航,侧栏下拉时固定

       网页设计中，特别是自适应布局，如果页面过长，用户下拉或滚动鼠标时，头部导航就看不到了。可以设计网页导航固定在页面顶部，让用户方便点击；设置页面侧栏固定的原因主要有：

①主栏内容很长，侧栏较短，用户滚动浏览时，侧栏就空白了，考虑布局时就需要固定侧栏全部或部分内容。

②强调主要内容，方便用户进行扩展阅读，增加PV。主要内容一般指主要分类、TAG标签、推荐文章(产品)、询盘下订单等。

一直固定在页面顶部

CSS样式主要部分

<style>
 .header{position:fixed;top:0;z-index:999}
</style>

导航HTML部分

 <p class="header"> 
  <ul>
   <li><a href="/seo/">SEO基础</a></li>
   <li><a href="/seojj/">SEO进阶</a></li>
  </ul>
 </p>

下拉或滚动才固定

       把下面代码放在</head>之前，在不产生冲突的情况下，放在页面代码的最下面也没什么问题，就是加载快慢的区别而已。

<script type="text/javascript" src="jquery1.42.min.js"></script><!--引入jquery，可自行下载-->
<script type="text/javascript">
//导航固定
 var nt = !1;$(window).bind("scroll",function() {var st = $(document).scrollTop();nt = nt ? nt: $("#header").offset().top;var sel=$("#header");
 if(nt < st) {
  sel.addClass("fixed");
 }else{
  sel.removeClass("fixed");}
 }); 
 //侧栏固定
 var nt_a = !1;$(window).bind("scroll",function() {var st_a = $(document).scrollTop();nt_a = nt_a ? nt_a: $(".tags_list").offset().top;var sel_a=$(".tags_list");
 if (nt_a < st_a){
  sel_a.addClass("fixed_a");
 }else{
  sel_a.removeClass("fixed_a");}
 });
</script>

       说明：需要固定的p可以用id或者class进行选择，如红色部分，向上、下滚动会在相应的p增加或去掉class="fixed"，如橙色部分。注意变量名要一一对应，请自行修改即可。

CSS样式主要部分

.fixed{position:fixed;top:0;z-inden:999}
.fixed_a{position:fixed;top:0;z-inden:999}

HTML部分

<p class="header" id="header">
  <ul>
   <li><a href="/seo">SEO基础</a></li>
   <li><a href="/seojj">SEO进阶</a></li>
  </ul>
</p>
<p class="tag_list">
 <p>侧栏部分内容</p>
</p>

       最终效果参考本站首页，根据实际情况p选择用id还是class，如果是class，那这一类的都会被固定，而id是唯一一个。

上一篇：网站自适应布局JS控制图片高度等于宽度

下一篇：CSS3画返回箭头,菜单,搜索放大镜