js特效子导航不随滚动条滚动而改变

最新推荐文章于 2021-10-20 22:55:01 发布

贴身护卫

最新推荐文章于 2021-10-20 22:55:01 发布

阅读量1.7k

点赞数

分类专栏： JS特效

本文链接：https://blog.csdn.net/ningxinyu520/article/details/19561749

版权

JS特效专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<ul class="sub-nav" id="snav">
  {fycms table="Class_fy" top="7"  order="Orderid asc,ID asc" where="  rootid=[type:rootclassid]"}
 <li><a href="[classlink]" [fy:if [thisclassid] ] class="on"[/fy:if]>{ClassName}</a></li> 
	{/fycms}   
   </ul>

	<div class="ServiceBanner" id="kjsj">
		<div class="ServiceBannerIn">
			<div class="bd">
				<ul>
					{fycms table="Class_fy" top="10" order="id asc" where="classid=[type:classid]"}
					{classpicslideshow fun="classpicslide"}
					{/fycms}
				</ul>
			</div>
			<div class="hd">
				<ul>
					{fycms table="Class_fy" top="10" order="id asc" where="classid=[type:classid]"}
					{classpicslideshow fun="classpicslide"}
					{/fycms}
				</ul>
			</div>
		</div>
	</div>

<script type="text/javascript">
 var li = document.getElementById("kjsj").getElementsByTagName("li");
 for(var i=0;i<li.length;i++){
   li[i].className = "a"+(i+1)
}
if(document.body.clientWidth>=1020){ document.getElementById("snav").style.left = (document.body.clientWidth-980)/2-125+"px"}
</script>

/* 子导航 */
.sub-nav{width:110px;background:#DBDFDF;position:fixed;left:0px;z-index:999;_position:absolute;top:235px;_margin-top:-1px;
_top:expression(eval(document.documentElement.scrollTop+235))}
.sub-nav li{width:110px; height:60px; line-height:60px;font-size:12px;text-align:center;border-bottom:2px #fff solid;}
.sub-nav li a{width:110px;height:60px;line-height:60px; display:block; color:#555;}
.sub-nav li a:hover{ color:#fff;background-color:#40B290;}
.sub-nav li .on{background-color:#40B290; font-weight:bold;color:#fff;}
.sub-nav li .on a{color:#000;}

参考网址：http://www.qh506.com/kjsjType/1.html

http://www.hetianhos.com/list.asp?cid=2560