用户登录  |  用户注册
首 页源码下载网络学院最新源码源码排行屏蔽广告
当前位置:新兴网络 > 网络学院 > 网页制作 > JavaScript

Javascript 智能浮动工具条

减小字体 增大字体 作者:佚名  来源:本站整理  发布时间:2010-09-08 18:32:56
它可以智能判断滚动条是否移动到了页面的最顶部,如果是,则浮动至最顶部,以至于不受滚动条的影响;当滚动条滚回来的时候,它同样为判断是否滚到了自己原来的默认位置,如果是,则恢复到最先的位置,与原网页融为一体。
HTML code运行代码复制代码编辑
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>Javascript 智能浮动工具条</title>
<style type="text/css">
html,body{
    margin:0px;
    height:100%;
    overflow:hidden;
}
#autoscroll{   
    height:100%;
    overflow:auto;
    width:100%;
    text-align:center;
}
.box{
    width:960px;
    height:100%;   
    text-align:left;
    margin:auto;
}
.head{   
    width:958px;
    height:200px;
    border:1px solid #eb6100;
    margin-top:10px;
    margin-bottom:10px;
}
.tool{       
    width:958px;
    border:1px solid #eb6100;
    background:#FFF;
}
.toolabsolute{   
    position:absolute;   
    z-index:100;
    top:1px;
}
.list{
    width:958px;
    height:2400px;
    border:1px solid #eb6100;   
    margin-top:10px;
    margin-bottom:10px;
}
</style>
<script src="http://www.newxing.com/img/jquery-1.3.2.js" language="javascript" type="text/javascript"></SCRIPT>
</head>
<body>
       
<div id="autoscroll">
    <div class="box">
        <div class="head">
        网页头部<br />
        </div>       
        <div class="tool" id="mytool">
        热门城市:北京 西安 上海 深圳 广州 杭州 成都 南京 重庆 北京<br />
        如果看不到效果请按 F5 刷新一下。
        </div>
        <div class="list">
        列表部分<br />
        1<br /><br /><br />
        2<br /><br /><br />
        3<br /><br /><br />
        4<br /><br /><br />
        5<br /><br /><br />
        6<br /><br /><br />
        7<br /><br /><br />
        8<br /><br /><br />
        9<br /><br /><br />
        10<br /><br /><br />
        11<br /><br /><br />
        12<br /><br /><br />
        13<br /><br /><br />
        14<br /><br /><br />
        15<br /><br /><br />
        16<br /><br /><br />
        </div>       
    </div>
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
    var mytooltop;
    var scrolltop;
    var toolleft;
    var cloned=false;
    toolleft=$(".box").get(0).offsetLeft;
    $("#mytool").clone(true).insertAfter("#autoscroll").css("left",toolleft+"px").addClass("toolabsolute");
    $(".toolabsolute").hide();
        $("#autoscroll").scroll(function(){
        mytooltop=$("#mytool").get(0).offsetTop;
        scrolltop=document.getElementById("autoscroll").scrollTop;
        if(scrolltop>=mytooltop && cloned==false){
            $(".toolabsolute").show();
            cloned=true;
        }
        if(!(scrolltop>=mytooltop) && cloned==true){
            $(".toolabsolute").hide();
            cloned=false;
        }
    })
})
</SCRIPT>
</body>
</html>

Tags:浮动工具条 JS

作者:佚名
  • 好的评价 如果您觉得此文章好,就请您
      100%(1)
  • 差的评价 如果您觉得此文章差,就请您
      0%(0)

网络学院评论评论内容只代表网友观点,与本站立场无关!

   评论摘要(共 0 条,得分 0 分,平均 0 分) 查看完整评论