JavaScript仿淘宝智能浮动

时间 2019-12-06

原文原文链接

喜欢逛淘宝的人，对淘宝的用户体验确定很满意，不错，淘宝就是那么讨人喜欢，老是关注用户举手投足的小细节。javascript

最近好像有2我的问过我，淘宝的浮动层是怎么作的，个人理解很简单，代码也不多，写个博客分享下，你们看看这样作有什么缺陷。css

下面这张图，就是个人案例中用到的图，叫topimg.png 。右击在新页面打开图片，而后复制下来，宽是930px，高30px。html

附上个人html代码，记得引入Jqueryjava

<!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 runat="server">
    <title></title>
        <script src="/s/js/tools/jquery.js" type="text/javascript"></script>
</head>
<body style="margin:0px; padding:0px;">
    <form id="form1" runat="server">
    <div style="height:1500px; width:930px; border: solid 1px #ccc; text-align:center;">
    <div style="background:#ddd; width:100%; height:90px;"></div>
   
    <div id="floatbox" style="position:static; top:0px; left:0px; width:930px; height:30px; background:#EEE;">
        <img src="topimg.png" />
    </div>
     <p>我是扰乱视线的文字喔</p>
    <p>我是扰乱视线的文字喔</p>
    <p>我是扰乱视线的文字喔</p>
     <p>我是扰乱视线的文字喔</p>
    <p>我是扰乱视线的文字喔</p>
    <p>我是扰乱视线的文字喔</p>
     <p>我是扰乱视线的文字喔</p>
    <p>我是扰乱视线的文字喔</p>
    <p>我是扰乱视线的文字喔</p> <p>我是扰乱视线的文字喔</p>
    <p>我是扰乱视线的文字喔</p>
    <p>我是扰乱视线的文字喔</p>
    </div>
    <script type="text/javascript">
        window.onscroll = function() {
            if ($.browser.safari || $.browser.webKi) { //判断浏览器
                nScroh = document.body.scrollTop;
            }
            else {
                nScroh = document.documentElement.scrollTop;
            }
            if (nScroh > 90) {
                $("#floatbox").css("position", "fixed");
            } else {
            $("#floatbox").css("position", "static");
            }
        }
    </script>
    </form>
</body>
</html>

此效果兼容 IE6以上的IE内核浏览器，chrome，Firefox，Opera，Safari等各大浏览器。jquery

效果简单，仅供参考，转载请附上出处，谢谢。web