zoukankan      html  css  js  c++  java
  • jquery实现浮动层效果

    层可以随着页面滚动而滚动,说明肯定是脱离了标准流的,CSS样式表 position:absolute;因为是上下移动,所以
    就是要改变层的CSS样式中的top属性定位),在jquery中有一个scrollTop属性,用于获取页面滚动的高度。所以在每次页面滚动
    的时候,将浮动层的高度设置为 (初始值)+ scrollTop即可。  但是scrollTop在ie和其他浏览器中的获取有不一样,可以通过
    如下方式
    :       var bodyTop = 0;
                if (typeof window.pageYOffset != 'undefined') {
                    bodyTop = window.pageYOffset; 
              } else if (
    typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')
    {                bodyTop = document.documentElement.scrollTop;            }
                else if (typeof document.body != 'undefined') { 
                  bodyTop = document.body.scrollTop; 
              }

    1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2  <html xmlns="http://www.w3.org/1999/xhtml">
    3 <head>
    4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5 <title>无标题文档</title>
    6 <script type="text/javascript" src="../jquery-1.3.1.js"></script>
    7 <!--/*以为是上下滚动,所以搞改变滚动的top属性(绝对定位),在jquery中有一个scrollTop属性,用于获取页面滚动的高度。所以在每次页面滚动的时候,将浮动层的高度设置为 (初始值)+ scrollTop即可。
    8
    9 但是scrollTop在ie和其他浏览器中的获取有不一样,可以通过如下方式:
    10 var bodyTop = 0;
    11 if (typeof window.pageYOffset != 'undefined') {
    12 bodyTop = window.pageYOffset;
    13 } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
    14 bodyTop = document.documentElement.scrollTop;
    15 }
    16 else if (typeof document.body != 'undefined') {
    17 bodyTop = document.body.scrollTop;
    18 }
    19 */-->
    20
    21 <script type="text/javascript">
    22 jQuery(document).ready(function($){
    23 $(window).scroll(function() {
    24 var bodyTop = 0;
    25 if (typeof window.pageYOffset != 'undefined') {
    26 bodyTop = window.pageYOffset
    27 } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
    28 bodyTop = document.documentElement.scrollTop
    29 } else if (typeof document.body != 'undefined') {
    30 bodyTop = document.body.scrollTop
    31 }
    32 $("#hellobaby").css("top", 250 + bodyTop)
    33 });
    34 });
    35
    36 </script>
    37 <style type="text/css">
    38 #hellobaby {
    39 background:#000;
    40 color:#fff;
    41 border:1px solid #B3B3B3;
    42 font-size:14px;
    43 right:0;
    44 position:absolute;
    45 top:250px;
    46 opacity:.7;
    47 filter:alpha(opacity=70);
    48 padding:10px;
    49 }
    50 #hellobaby a {
    51 color:orange;
    52 text-decoration:none;
    53 }
    54 .closebox {
    55 position:absolute;
    56 right:5px;
    57 top:0;
    58 }
    59 </style>
    60 </head>
    61 <body>
    62 <div style="height:1600px;">
    63 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    64 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    65 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    66 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    67 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    68 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    69 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    70 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    71 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    72 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    73 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    74 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    75 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    76 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    77 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    78 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    79 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    80 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    81 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    82 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    83 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    84 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    85 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    86 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    87 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    88 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    89 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    90 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    91 我爱beyond网,全国最大的公益性纪念beyond网站,www.ilovebeyond.com<br/>
    92 </div>
    93 <div id="hellobaby"> 推荐您 <a href="http://www.ilovebeyond.com" target="_blank">点击这里</a> 订阅我爱beyond网 o(∩_∩)o
    94 <div class="closebox"> <a href="javascript:void(0)"onclick="$('#hellobaby').slideUp('slow');$('.closebox').css('display','none');" title="关闭">×</a> </div>
    95 </div>
    96 </body>
    97 </html>
  • 相关阅读:
    with admin option 和 with grant option 的区别 (转)
    压缩数据块
    建表时pctfree和pctused参数作用
    Oracle哪些错误会写进alert日志
    Oracle 差异、增量、零级备份
    模拟原生的promise
    react-loadable 实现组件按需加载
    react 中配置 http-proxy-middleware
    craco 配置 less.module
    ESLint: 'React' was used before it was defined.(no-use-before-define)
  • 原文地址:https://www.cnblogs.com/beyond1990/p/2072956.html
Copyright © 2011-2022 走看看