首页
登录 | 注册

弹出层中div固定在底部【有滚动条】

再在弹出层中,如果有滚动条的情况下,要是元素固定在底部时,不能使用position:fixed,fixed属性是相对浏览起来说的,对弹出层已经明显不再使用。如下图、弹出层中div固定在底部【有滚动条】

如果使用fixed就会使小图出现在浏览器的右下角,而不是弹出层的右下角
这种情况下只能使用 js监听滚动条位置,来处理div位置

效果图

弹出层中div固定在底部【有滚动条】

代码

简单的例子,所以html和javascript代码放一起了

<html>
    <head>
        <title>测试</title>
    </head>
    <body>
        <h1>

        </h1>
        <div class=".layui-layer-content" style="overflow:auto;height:600px;">
                <div style="width:100%;">
                    <div>
                        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540214889032&di=8ab7348a6887d0cfaabcc62a37ba3c8f&imgtype=0&src=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Farchive%2F50385bdb7aa0b4abaf25fef58be72dfe78b693ff.jpg">
                    </div>
                    <div name="jcropPvew" style="position:absolute;width: 200px;right: 28px;top: 467px; border: 1px solid orange;">
                        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540214889032&di=8ab7348a6887d0cfaabcc62a37ba3c8f&imgtype=0&src=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Farchive%2F50385bdb7aa0b4abaf25fef58be72dfe78b693ff.jpg"  style="background-size:100% 100%;width: auto;height: auto;max-width: 100%; max-height: 100%;">
                    </div>
                </div>
        </div>
        <script  src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
        <script>
            var tops= $('[name="jcropPvew"]').position().top;
                $('[name="jcropPvew"]').css("top",tops);
                $('[name="jcropPvew"]').attr('otop',tops); //存储原来的距离顶部的距离
                $('.layui-layer-content').scroll(function () {
                    var scrollTop = $('.layui-layer-content').scrollTop();
                    var prevTop= $('[name="jcropPvew"]').attr('otop');
                    $('[name="jcropPvew"]').css({top: (parseInt(prevTop)+scrollTop)+"px"});
                });
        </script>
    </body>
</html>


2020 jeepxie.net webmaster#jeepxie.net
10 q. 0.009 s.
京ICP备10005923号