JS下拉页面时一个横幅的样式和js

整理之前的代码，发现有一个js，就是页面往下浏览时，上面的商品名称和购买按钮在页面上方悬浮的，就整理下来，代码如下：

 1 <script type="text/javascript">
 2     window.onload = function () {
 3         //var nav =$("#divnav");
 4         var nav = document.getElementById('divnav');
 5         window.onscroll = function () {
 6             var top = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop; //w3c，各ie的兼容
 7             if (top >= 40) {
 8                 addClass(nav, 'nav-fixed');
 9             } else {
10                 removeClass(nav, 'nav-fixed');
11                 }
12             };
13         };
14     function addClass(ele, classname) {
15         var oldClass = ele.className;
16         var pattern = new RegExp('(^|\s)' + classname + '(\s|$)');
17         if (!pattern.test(oldClass)) {
18             ele.className += ' ' + classname;
19         }
20     }
21     function removeClass(ele, classname) {
22         var oldClass = ele.className;
23         var pattern = new RegExp('(^|\s)' + classname + '(\s|$)');
24         if (pattern.test(oldClass)) {
25             ele.className = ele.className.replace(pattern, ' ');
26         }
27     }
28 </script>

html页面上的东西，如下：

<div id="divnav" class="divnav">
    <div id="nav">
        <table class="nav-table">
            <tr>
                <td class="table-border"></td>
                <td class="td-left">
                    <a>商品名</a>
                </td>
                <td class="td-reg">
                    <asp:Button ID="btbuy" class="btn-primary" Style="font-family: Microsoft Yahei; text-decoration: none; font-size: 13px;" runat="server" Text="点击订购" OnClick="btbuy_Click" />
                </td>
                <td class="table-border"></td>
            </tr>
        </table>
    </div>
</div>

几个css样式：

1 .table-border{ width: 10%;}
2 .nav-table{width: 100%;height: 100%;}
3 .td-left{ width: 40%; text-align: left;}
4 .div-left{width: 100%;text-align: left;}
5 .td-reg{ text-align: right;}
6 .td-cent{ text-align: center;}
7 .btn-primary{background:#ff6700;border-color:#ff6700;color: #fff;width: 130px;height: 40px;font-size: 14px;}
8 .btn-primary:hover{background-color:#f25807;border-color:#f25807;color:#fff}