asp.net開發中利用jquery來實現滾動下拉標題浮動固定顯示

暖楓無敵發表於2015-11-04
ASP.NETjQuery

1、問題來源

       在實際專案開發中，頁面如果內容很多，會出現滾動條，方便向下瀏覽，但是頁面的標題頭也會隨下拉操作而無法看到，那如果我們想讓下拉過程中標題仍在頁面最頂端固定浮動顯示，我們該如何做呢？


2、解決方法

      使用css進行位置控制，然後結合jquery來處理滾動事件新增樣式。需要注意的是，需要固定的部分一定要設定背景顏色 background-color屬性值，如果頁面是白色則設定#fff，否則效果出不來。


3、示例程式碼

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>滾動條下拉標題固定在頭部</title>
    <script type="text/javascript" src="../../Scripts/Jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        window.onscroll = function () {
            if ($(document).scrollTop() > 0) {
                $(".pf").addClass('float');
            } else {
                $(".pf").removeClass('float');
            }
        }
    </script>
    <style type="text/css">
        .pf {
            width: 100%;
            height: 50px;
            background-color: #494949;
            text-align: center;
            line-height: 50px;
            color: #fff;
        }

        html {
            _background-image: url(about:blank);
            _background-attachment: fixed; /** 防止 ie6 抖動 **/
        }

        .float {
            position: fixed;
            z-index: 999999;
            top: 0px;
        }

        * html .float {
            position: absolute;
            _top: expression(documentElement.scrollTop-0);
        }
    </style>

</head>
<body>
    <div class="pf">這裡是系統標題欄，我們想要保持固定</div>
  
    <div>
        <table width="100%" border="1">
            <script type="text/javascript" language="javascript">
                for (i = 0; i < 50; i++) {
                    document.write("<tr><td>系統整合考試必過！有沒有資訊，有" + (i + 1) + "</td></tr>");
                }
            </script>
        </table>
    </div>
</body>
</html>

4、顯示效果


繼續下拉內容，發現內容如下：


===========================================================================

如果覺得對您有幫助，微信掃一掃支援一下：


相關文章