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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。