小墨の博客

一、类似固定在某个地方的形式

二、类似导航栏悬浮的形式

原文链接：https://blog.csdn.net/u012698249/article/details/78031155

本文在原文基础上做了少许修改

一、类似固定在某个地方的形式

<div style="margin: 0 auto; width: 80%; position: fixed; bottom: 5px; height: 50px; font-size: 0; line-height: 0; z-index: 100; text-align: right;">
    <button ID="Button2"  Style="width: 150px; height: 50px; text-decoration: none;" Text="Apply Order"  />
</div>
<div style="height: 8000px; ">占位用容器</div>

其中 margin: 0 auto是为了div居中显示，width属性的设置要取决于这个div你要它显示的形式，要慢慢的来调。position: fixed用于生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

position

属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

二、类似导航栏悬浮的形式

<!--css和JavaScript-->
<style>
        .nav-fixed {
            background-color: #d3d3d3;
            left: 0;
            width: 100%;
            position: fixed;
            top: 0;
            z-index: 9999;
        }
    </style>
<script type="text/javascript">
        window.onload = function () {
            var nav = document.getElementById('nav');
            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="nav">
 	<table style="width: 100%; height: 100%">
 		<tr>
 			<td style="vertical-align: middle; width: 20%; text-align: left;">
 				<a style="color: black;">xxxxxx</a>
 			</td>
 			<td style="width: 80%; text-align: right;">
 				<Button ID="btbuy"  Style="width: 150px; height: 45px; text-decoration: none;" Text="点击"  />
			</td>
 		</tr>
 	</table>
</div>
<div style="height: 8000px; ">占位用容器</div>

js里通过获取id为nav的div，然后获取top大于某个值时，调用nav-fixed样式，其中的width属性也是要自己来调的，每个页面的情况都不相同，值也就不相同，下面的js部分应该是为了使用nav-fixed的样式吧。

参考http://jingyan.baidu.com/article/6079ad0e7950e228fe86db43.html

参考https://zhidao.baidu.com/question/416923914.html

张小弟之家