仿京东商城中商品介绍动态悬浮栏

来源：互联网发布：苹果手机验钞机软件编辑：程序博客网时间：2024/06/04 18:15

360buy上,在商品详情页面中,有一个导航栏,当滚动到最顶部是,该栏就固定在最顶部.用起来挺方便的,想看其他内容时,不用再翻到最顶端.

觉得很好玩就弄了个模型出来.
代码很简单:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>仿京东商品介绍动态悬浮栏</title>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <style type="text/css">        #float        {            width: 600px;            height: 32px;            border: 1px solid Green;            top: 0px;            background-color:Red;        }        #content        {            height: 640px;            width: 600px;                    }    </style>    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>    <script type ="text/javascript" >        $(function() {            var offsetTop = $("#float").offset().top;            $(window).scroll(function() {                //alert(offsetTop);                var scrollTop = document.documentElement.scrollTop;                if (scrollTop > offsetTop){                    $("#float").css("position","fixed");                }                else{                    $("#float").css("position", "static");                }            });        })    </script></head><body>        <div id="content">    <div style="height: 250px; background-color:Gray">    </div>        <div id="float">        </div>        <div style="height: 9999px;  background-color:Gray">    </div>    </div>    </body></html>