jquery 实现窗口滚动时图片置顶

最新推荐文章于 2023-08-10 17:49:37 发布

weixin_34166847

最新推荐文章于 2023-08-10 17:49:37 发布

阅读量158

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/yuerduo/p/9088400.html

版权

涂有背景色的地方即为关键代码处。

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8" />
  5     <title>窗口滚动时图片置顶</title>
  6     <meta name="renderer" content="webkit">
  7     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
  8     <meta content="yes" name="apple-mobile-web-app-capable" />
  9     <meta content="black" name="apple-mobile-web-app-status-bar-style" />
 10     <link href="css/font.css" rel="stylesheet" />
 11     <link href="css/xadmin.css" rel="stylesheet" />
 12     <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 13     <script src="js/xadmin.js"></script>
 14     <script src="lib/layui/layui.js"></script>
 15 
 16     <script src="js/jquery.qrcode.min.js"></script>
 17 
 18     <style>
 19 
 20         .mainavi {
 21             text-align: center;
 22         }  //111
 23 
 24     </style>
 25 </head>
 26 <body>
 27 <div class="x-body">
 28     <table id="QrList" class="layui-table" lay-filter="QrListTable"></table>
 29 </div>
 30 <div id="divQr" class="mainavi" style="position: absolute; top: 10px; margin: auto;"> //222
 31     <label style="font-size: 20px;" id="lbName"></label>
 32     <div id="divCode" ></div>
 33 </div>
 34     <script type="text/html" id="barDemo">
 35         <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
 36         <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
 37         <a class="layui-btn layui-btn-xs" lay-event="show">显示图片</a>
 38     </script>
 39 <script>
 40     $("body").click(function() {
 41         $("#divQr").hide();
 42     });
 43     layui.use('laydate', function () {
 44         var laydate = layui.laydate;
 45 
 46         //执行一个laydate实例
 47         laydate.render({
 48             elem: '#start' //指定元素
 49         });
 50 
 51         //执行一个laydate实例
 52         laydate.render({
 53             elem: '#end' //指定元素
 54         });
 55     });
 56 
 57 
 58     layui.use('table', function () {
 59         var table = layui.table;
 60 
 61         //监听工具条
 62         table.on('tool(QrListTable)', function (obj) {
 63             var data = obj.data;
 64             if (obj.event === 'del') {
 65                 layer.confirm('确认删除？', function (index) {
 66                     $.ajax({
 67                         url:  , //请求的URL
 68                         cache: true, //不从缓存中取数据
 69                         data: data, //发送的参数
 70                         type: 'post', //请求类型
 71                         dataType: 'json', //返回类型是JSON
 72                         timeout: 20000, //超时
 73                         error: function (xhr, err) {
 74                             parent.layer.alert(xhr.responseText);
 75                             return false;
 76                         },
 77                         success: function (data) {
 78                             obj.del();
 79                             layer.close(index);
 80                         }
 81                     });
 82 
 83                 });
 84             }
 85             else if (obj.event === 'detail') {
 86                 window.location.href = "";
 87             }
 88             else if (obj.event === 'show') {
 89                 $("#lbName").text(data.Name);
 90                 $('#divCode').empty();
 91                 $('#divCode').qrcode(data.QrContent);
 92                 $("#divQr").show();
 93                 $('.mainavi').smohanfixednav(0, 999); //333
 94                 window.event ? window.event.cancelBubble = true : event.stopPropagation();
 95             }
 96         });
 97 
 98     });
 99     $.fn.smohanfixednav = function (mtop, zindex) { //444
100         var nav = $(this),
101             isIE6 = 'undefined' == typeof (document.body.style.maxHeight),
102             mtop = mtop,
103             zindex = zindex,
104             dftop = nav.offset().top - $(window).scrollTop(),
105             dfleft = nav.offset().left - $(window).scrollLeft(),
106             dfcss = new Array;
107         dfcss[0] = nav.css("position"),
108             dfcss[1] = nav.css("top"),
109             dfcss[2] = nav.css("left"),
110             dfcss[3] = nav.css("zindex"),
111             $(window).scroll(function (e) {
112                 $(this).scrollTop() > dftop ? isIE6 ? nav.css({
113                     position: "absolute",
114                     top: eval(document.documentElement.scrollTop),
115                     left: dfleft,
116                     "z-index": zindex
117                 }) : nav.css({
118                     position: "fixed",
119                     top: mtop + "px",
120                     left: dfleft,
121                     "z-index": zindex
122                 }) : nav.css({
123                     position: dfcss[0],
124                     top: dfcss[1],
125                     left: dfcss[2],
126                     "z-index": dfcss[3]
127                 })
128             })
129     }
130 </script>
131 
132 </body>
133 </html>