jquery 实现窗口滚动时图片置顶
涂有背景色的地方即为关键代码处。
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>