window.onscroll = function () {
var sl = -Math.max(document.body.scrollTop, document.documentElement.scrollTop);
//document.getElementsByClassName('layui-m-layerchild').style.Top = sl + 'px';
$("#fixdiv").css("top", sl + "px"); };

根据计算屏幕滚动时距顶部的距离,设置弹出层top为负的

div样式position:fixed,不随屏幕滚动而滚动,导致屏幕太小时弹出层被遮挡,无法滚动查看的解决办法的更多相关文章

  1. JS 点击弹出图片/ 仿QQ商城点击左右滚动幻灯片/ 相册模块,点击弹出图片,并左右滚动幻灯片

    1, 点击弹出图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  2. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

  3. 每日技术总结:Better-scroll应用于弹出层内容滚动

    一.Better-scroll在项目中的应用 Better-scroll这款滚动插件还是很好用的,通常不会有什么问题.但偶尔总会出点意外.今天再次使用better-scroll,记录一下这次顺利的过程 ...

  4. JS弹出层制作,以及移动端禁止弹出层下内容滚动,overflow:hidden移动端失效问题

    HTML <div class="layer"> <div class="menu-list"> <span>社会</ ...

  5. jquery层居中,点击小图查看大图,弹出层居中代码,顶部层固定不动,滚动条滚动情况

    jquery层居中,点击小图查看大图,弹出层居中代码 http://www.cnblogs.com/simpledev/p/3566280.html 见第一版,发现一个情况,如果页面内容多出一屏的情况 ...

  6. jQuery弹出层始终垂直居中相对于屏幕或当前窗口

    把弹出层的位置设为fixed,设置top:50%,然后获取当前元素的整体的高度height,用获取的高度height/2,设置margin-top:-height/2.即可把当前的弹出层始终垂直居中于 ...

  7. div滚动条弹出层效果 (所需要的css文件和js文件,都已经上传到文件里面了progressbar.rar)

    <%--总的弹出层--%> <div class="tcck" id="joinclub" style="display:none& ...

  8. [bug]小程序弹出层滚动穿透问题修复

    如题,解决方案有两种: 1.如果弹出层没有滚动事件,就直接在蒙板和弹出层上加 catchtouchmove;(方便快捷) <template name="popup-modal&quo ...

  9. 【position也可以很复杂】当弹出层遇上了鼠标定位(下)

    前言 接着昨天的内容写,为了保证内容连续性,这里还是把昨天的内容拷了过来. 请用现代浏览器测试 引出问题 有图有真相,我们来看一个智联招聘里面经常出现的图层: 他这个是没有什么问题的,我们来简单看看其 ...

随机推荐

  1. Spring 框架(三)

    1 spring l AOP :切面编程 切面:切入点 和 通知 结合 l spring aop 编程 <aop:config> 方法1: <aop:pointcut express ...

  2. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    viewport:移动设备上用来显示网页的那部分区域,但其大小并不局限于那部分可视区域 width设置layout viewport  的宽度,为一个正整数,或字符串"device-widt ...

  3. C++:关于委托类

    转自:http://blog.csdn.net/dadalan/article/details/4041931.vs2010已经支持function/bind,能很好实现委托. [说明] 本文不仅介绍 ...

  4. LeetCode-Maximal Rectangle [学以致用] ZZ

    http://www.cnblogs.com/lichen782/p/leetcode_maximal_rectangle.html 题目: Given a 2D binary matrix fill ...

  5. MySQL MHA搭建

    MHA算是业内比较成熟的MySQL高可用解决方案,在MySQL故障切换过程中,MHA能做到自动完成数据库的故障切换操作,并且在进行故障切换的过程中,MHA能在最大程度上保证数据的一致性,以达到真正意义 ...

  6. Elasticsearch学习总结--原理篇

    一.概念 1.1 官方文档 以下总结自ElasticSearch的官方文档以及自己的一些实践,有兴趣的可以直接阅读官方文档: https://www.elastic.co/guide/en/elast ...

  7. OSPF-DR与BDR的选举及作用

    IERS-DR与BDR的选举及作用 一.问题引出 在运行OSPF的MA网络中包括广播型和NBMA网络会存在两个问题: 1).在一个有n个路由器的网络中,会形成(n*(n-1))/2邻居关系. 2).邻 ...

  8. zend studio 破解、汉化和字体颜色及快捷键相关设置

    下载:http://www.geekso.com/component/zendstudio-downloads/ 破解:http://www.geekso.com/ZendStudio9-key/ 注 ...

  9. ping -l 1000 -t 与ping -t的区别

    windows -l 1000的意思是规定发送的包的大小是1000字节如果不加这个参数的话,就发送包默认为32字节还有-t就是一直发送,直到手动停止

  10. (fields.E130) DecimalFields must define a 'decimal_places' attribute.

    DecimalField类型:固定精度的十进制数,一般用来存金额相关的数据.额外的参数包括DecimalField.max_digits(整个数字的长度)和DecimalField.decimal_p ...