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