当前位置 : 主页 > 网站建设 > 正文

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

原创

重庆seo2017-03-04 20:37:00阅读()用户体验JSA+ / A-

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

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

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

网页设计顶部下拉固定

一直固定在页面顶部

CSS样式主要部分

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

导航HTML部分

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

下拉或滚动才固定

       把下面代码放在</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>

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

CSS样式主要部分

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

HTML部分

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

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

    扩展阅读

    本文地址:https://www.vi586.com/web/396.html
    版权声明:原创文章,版权归重庆SEO吖七所有,欢迎分享本文,支持原创,转载请保留出处

    赞(3)