整理之前的代码，发现有一个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}