署理加盟 2019全新署理方案 挣钱+省钱左右开弓,独立渠道,丰盛赢利!

您现在的方位: unibet网 > 站长学院 > 建站教程 >

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

来历:不知道 发布时刻:2019-03-30热度:我要谈论
网页规划中,特别是自习惯布局,假如页面过长,用户下拉或翻滚鼠标时,头部导航就看不到了。能够规划网页导航固定在页面顶部,让用户便利点击;设置页面侧栏固定的原因首要有: ①主栏内容很长,侧栏较短,用户翻滚阅览时,侧栏就空白了,考虑布局时就需求固定侧栏悉数...

unibet注册unibet淘宝店开业,好礼送不断

       网页规划中,特别是自习惯布局,假如页面过长,用户下拉或翻滚鼠标时,头部导航就看不到了。能够规划网页导航固定在页面顶部,让用户便利点击;设置页面侧栏固定的原因首要有:

①主栏内容很长,侧栏较短,用户翻滚阅览时,侧栏就空白了,考虑布局时就需求固定侧栏悉数或部分内容。

②着重首要内容,便利用户进行扩展阅览,添加PV。首要内容一般指首要分类、TAG标签、引荐文章(产品)、询盘下订单等。

网页规划顶部下拉固定

一向固定在页面顶部

CSS款式首要部分

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

导航HTML部分

 <p class="header"> 
  <ul>
   <li><a href="/查找引擎优化/">SEO根底</a></li>
   <li><a href="/查找引擎优化jj/">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根底</a></li>
   <li><a href="/查找引擎优化jj">SEO进阶</a></li>
  </ul>
</p>
<p class="tag_list">
 <p>侧栏部分内容</p>
</p>

       终究作用参阅本站主页,依据实际情况p挑选用id仍是class,假如是class,那这一类的都会被固定,而id是仅有一个。

本文地址:https://www.m88nob1.com/news/1371.html

    责任编辑:unibet网

    宣布谈论

    谈论列表(条)