小墨の博客

梦想需要付诸行动,否则只能是梦

【HTML】HTML页悬浮div的两种方式

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

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

原文链接: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

张小弟之家

本文链接:
文章标题:

本站文章除注明转载/出处外,均为原创,若要转载请务必注明出处。转载后请将转载链接通过邮件告知我站,谢谢合作。本站邮箱:admin@only4.work

尊重他人劳动成果,共创和谐网络环境。点击版权声明查看本站相关条款。

    发表评论:

    搜索
    本文二维码
    标签列表
    站点信息
    • 文章总数:503
    • 页面总数:20
    • 分类总数:92
    • 标签总数:207
    • 评论总数:58
    • 浏览总数:211726

    | | |
    | |  Z-Blog PHP