`
黄继华
  • 浏览: 45003 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

js控制position:fiexd 浏览器定位 兼容个浏览器

 
阅读更多

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript">
                function insertcode() {
                    var $body = $("body");
                    $body.append('<div style=\" height:1000px; font-size:24px;\">新增项目</div>')
                    $("#page_tag_load").hide();
                }
                $(document).ready(function () {

                    $(window).scroll(function () {
                        var $body = $("body");
                        var $html = "";
                        $html += "<br/>" + ($(window).height() + $(window).scrollTop());
                        $html += "<br/>window.height: " + $(window).height();
                        $html += "<br/>body.height: " + $body.height();
                        $html += "<br/>window.scrollTop: " + $(window).scrollTop();
                        $("#page_tag_bottom").html($html);
						$("#page_tag_bottom").css({"top":$(window).scrollTop()})
                  /*判断窗体高度与竖向滚动位移大小相加 是否 超过内容页高度*/
                       // if (($(window).height() + $(window).scrollTop()) >= $body.height()) {
                            //$("#page_tag_load").show();
                            //setTimeout(insertcode, 1000);/*IE 不支持*/
                           // insertcode();
                       // }
                    });
                });
    </script>
</head>
<body>
	
    <div style=" height:1000px; font-size:24px;">新增项目</div>
    <div id="page_tag_bottom" style=" width:200px; position:fixed;top:0;  background-color:#cccccc;height:100px;"></div>
    <div id="page_tag_load" style=" display:none; font-size:14px;position:fixed; bottom:0px; background-color:#cccccc;height:50px;">加载中...</div>
</body>
</html>

根据滚动条的滚动控制层的浮动

*html {overflow-y: hidden;}/*只是定制垂直滚动fixed*/



分享到:
评论

相关推荐

    css ie6 fiexd属性解决方法

    在探讨“css ie6 fixed属性解决方法”这一主题时,我们不得不面对一个历史遗留问题:Internet Explorer 6(IE6)对于CSS3中fixed定位的支持不足。IE6发布于2001年,其浏览器内核对现代Web标准的支持有限,尤其是在...

    小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)

    开发中我们要做一些类似遮罩层或者页面header固定而页面内容滚动的效果时,往往会使用到:position: fiexd;属性,但是往往会出现绑定在定位元素上的事件无法触发,原因出现在哪里? 经过摸索,终于找到答案:元素...

    css中关于定位属性position为fixed的使用记载

    在html中,当一个div想要定位时,我们第一反应是position属性,而position属性除了默认值外,还有absolute,relative和fixed。当被设置成fixed时,可以通过设置left、right、top、bottom的值来相对于body定位。 代码...

    ie6,ie7,ie8完美支持position:fixed的终极解决方案

    ie6对position:fixed不支持,网上有很多解决方法,有的在ie6,ie7上调试成功后,在ie8上又不好使,div层还是跟随滚动条浮 动;以下总结方法,在ie6,ie7,ie8上都调试成功,且页面滚动条滚动时,效果还挺好,div层并...

    vue-fixed-header-由TypeScript编写的Vue.js的简单且跨浏览器友好的固定标头组件。-Vue.js开发

    Vue固定标头Vue.js的简单和跨浏览器友好的固定标头组件。 安装yarn add vue-fixed-header在单个文件中使用Compo Vue固定头Vue.js的简单和跨浏览器友好的固定头组件。 安装yarn add vue-fixed-header在单个文件组件中...

    fixed相对父元素定位

    fixed默认是相对浏览器定位的,在开发中,经常会用到相对某个元素定位,思路就是障眼法,多套一个div

    jQuery的position()方法详解

    而对于第二个组合,由于没有定位的父元素,`.children`元素的`left`和`top`值将是相对于浏览器窗口的。 总结一下,`jQuery.position()`方法的关键点有以下几点: 1. 获取匹配元素相对于最近定位祖先元素或视口的...

    表格头部固定不动,数据滚动插件

    同时,考虑到兼容性和性能,插件可能还会包含一些优化策略,例如使用虚拟滚动、延迟渲染或者针对不同浏览器的适配代码。 标签“Table lockHeader”明确指出了插件的主要功能点,即锁定表格的表头。这在搜索和查找...

    fixed-data-table-2:一个React表组件,旨在允许呈现数百万行数据

    FixedDataTable是一个React组件,用于以灵活,强大的方式构建和呈现数据。 它支持标准表功能,例如标题,列,行,标题分组以及固定位置和滚动列。 该表旨在处理数千行数据而又不牺牲性能。 平滑滚动是...

    FastReport.v4.15 for.Delphi.BCB.Full.Source企业版含ClientServer中文修正版支持D4-XE5

    FastReport.v4.15 for.Delphi.BCB.Full.Source企业版含ClientServer中文修正版支持Delphi 4-XE5 and C++Builder 6-XE5. D2010以上版本(D14_D19)安装必读 delphi2010以上版本(D14_D19)使用者安装时,请将res\frccD14_...

Global site tag (gtag.js) - Google Analytics