监理公司管理系统 | 工程企业管理系统 | OA系统 | ERP系统 | 造价咨询管理系统 | 工程设计管理系统 | 甲方项目管理系统 | 签约案例 | 客户案例 | 在线试用
X 关闭
新余网站建设公司

当前位置:工程项目OA系统 > 泛普各地 > 江西OA系统 > 新余OA > 新余网站建设公司

JavaScript智能浮动

申请免费试用、咨询电话:400-8352-114

我们经常在淘宝网看到这样的特效,商品列表特别长,而商品列称号一直坚持在最顶端。假如你把滚动条滚动至最上边了,那么它会自动判别能否到顶端了,然后不断置顶从而不怕遮挡。

这种特效是经过JavaScript和CSS完成的,在实践开发中有不少用处,下面是新余网站建设找到的一个运用JavaScript制造的仿淘宝智能浮动的源代码,兼容性不错,在IE、Firefox、Chrome下都能正常工作。

在Z-Blog中运用这个特效代码需求留意,假如在侧边栏运用,则需求留意,侧栏中的栏目不能运用JavaScript动态加载,必需用静态的格式,否则在JavaScript会错误的计算页面高度,上下滚动的时分会呈现错位现象。

以下是相关代码:

JavaScript 代码

(function(){

var oDiv=document.getElementById("float");

var H=0,iE6;

var Y=oDiv;

while(Y){H+=Y.offsetTop;Y=Y.offsetParent};

iE6=window.ActiveXObject&&!window.XMLHttpRequest;

if(!iE6){

window.onscroll=function()

{

var s=document.body.scrollTop||document.documentElement.scrollTop;

if(s>H){oDiv.className="div1 div2";if(iE6){oDiv.style.top=(s-H)+"px";}}

else{oDiv.className="div1";}

};

}

})();

HTML 代码

HTML 代码

HTML 代码

<div id="box">

<div id="float" class="div1">

//随滚动移动的部分代码

</div>

</div>

  

CSS 代码

#box{float:left;position:relative;width:295px;}

.div1{}  

.div2{position:fixed;_position:absolute;top:3px;z-index:295;}

发布:2007-03-31 15:14    编辑:泛普软件 · xiaona    [打印此页]    [关闭]
新余OA
联系方式

成都公司:成都市成华区建设南路160号1层9号

重庆公司:重庆市江北区红旗河沟华创商务大厦18楼

咨询:400-8352-114

加微信,免费获取试用系统

QQ在线咨询

泛普新余网站建设公司其他应用

新余软件开发公司 新余门禁系统 新余物业管理软件 新余仓库管理软件 新余餐饮管理软件 新余网站建设公司