代理加盟 2019全新代理计划 赚钱+省钱双管齐下,独立平台,丰厚利润!

您现在的位置: 188bet网 > 站长学院 > 建站教程 >

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

来源:未知 发布时间:2019-03-30热度:我要评论
网页设计中,特别是自适应布局,如果页面过长,用户下拉或滚动鼠标时,头部导航就看不到了。可以设计网页导航固定在页面顶部,让用户方便点击;设置页面侧栏固定的原因主要有: ①主栏内容很长,侧栏较短,用户滚动浏览时,侧栏就空白了,考虑布局时就需要固定侧栏全部...

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

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

②强调主要内容,方便用户进行扩展阅读,增加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是唯一一个。

本文地址:http://www.ms88kzm.com/news/1371.html

    责任编辑:188bet网