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

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

<script type="text/javascript">
    window.onload = function () {
        //var nav =$("#divnav");
        var nav = document.getElementById('divnav');
        window.onscroll = function () {
            var top = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop; //w3c，各ie的兼容
            if (top >= 40) {
                addClass(nav, 'nav-fixed');
            } else {
                removeClass(nav, 'nav-fixed');
                }
            };
        };
    function addClass(ele, classname) {
        var oldClass = ele.className;
        var pattern = new RegExp('(^|\s)' + classname + '(\s|$)');
        if (!pattern.test(oldClass)) {
            ele.className += ' ' + classname;
        }
    }
    function removeClass(ele, classname) {
        var oldClass = ele.className;
        var pattern = new RegExp('(^|\s)' + classname + '(\s|$)');
        if (pattern.test(oldClass)) {
            ele.className = ele.className.replace(pattern, ' ');
        }
    }
</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样式：

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