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

最新推荐文章于 2024-09-30 10:20:27 发布

东明之羞

最新推荐文章于 2024-09-30 10:20:27 发布

阅读量3.5k

点赞数 1

分类专栏： HTML JavaScript 文章标签：弹出层中div固定固定底部

本文链接：https://blog.csdn.net/qq_28254093/article/details/83277020

版权

JavaScript 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

HTML

10 篇文章 1 订阅

订阅专栏

再在弹出层中，如果有滚动条的情况下，要是元素固定在底部时，不能使用position:fixed,fixed属性是相对浏览起来说的，对弹出层已经明显不再使用。如下图、在这里插入图片描述
如果使用fixed就会使小图出现在浏览器的右下角，而不是弹出层的右下角
这种情况下只能使用 js监听滚动条位置，来处理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>