Question

我的目标是将元素粘贴在模态，粘性套件中，就像非模版屏幕的魅力一样。

我厌倦了将id / class放到父元素中，但是似乎没有任何作用。

我无法弄清楚到底需要做什么

$(".sidebar").stick_in_parent({
 offset_top: 10,
 parent: ".modal-body"
});

这里是jsfiddle，

感谢您的帮助

Answer 1

您可以在此处尝试以下代码：

此问题可以轻松解决位置粘滞但位置粘滞不支持最早的浏览器的问题。

您在此处更改以下代码：

.modal-content {
  max-height: calc(100vh - 50px);
  overflow: auto;
  }
  .modal-content .modal-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
  }
  .modal-alternate-wrapper {
    position: sticky;
    top: 60px;
  }

我只更新上面的代码：

$('#myModalHorizontal').on('shown.bs.modal',function(){
	console.log("init sticky");
	$(".sidebar").stick_in_parent({
    offset_top: 10,
    parent: ".modal-body"
	});
})

.modal-body .form-horizontal .col-sm-2,
.modal-body .form-horizontal .col-sm-10 {
    width: 100%
}

.modal-body .form-horizontal .control-label {
    text-align: left;
}

.modal-body .form-horizontal .col-sm-offset-2 {
    margin-left: 15px;
}

* {
    font-size: 10px;
    color: #333;
    box-sizing: border-box;
}

.modal-content {
    max-height: calc(100vh - 50px);
    overflow: auto;
}

.modal-content .modal-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
}

.modal-alternate-wrapper {
    position: sticky;
    top: 60px;
}

.wrapper,
.header,
.main,
.footer {
    padding: 10px;
    position: relative;
}

.wrapper {
    border: 1px solid #333;
    background-color: #f5f5f5;
    padding: 10px;
}

.header {
    background-color: #6289AE;
    margin-bottom: 10px;
    height: 100px;
}

.sidebar {
    position: relative;
    padding: 10px;
    background-color: #ccc;
    height: 300px;
    width: 100px;
    float: left;
}

.main {
    background-color: #ccc;
    height: 600px;
}

.footer {
    background-color: #6289AE;
    margin-top: 10px;
    height: 250px;
}

.top {
    position: absolute;
    top: 10px;
}

.bottom {
    position: absolute;
    bottom: 10px;
}

.clear {
    clear: both;
    float: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalHorizontal">
    Launch Horizontal Form
</button>

<!-- Modal -->
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    Modal title
                </h4>
            </div>

            <!-- Modal Body -->
            <div class="modal-body">
                <div class="header"> <a class="top">header top</a>
                    <a class="bottom">header bottom</a>

                </div>
                <div class="container modal-alternate-wrapper">
                    <div class="row">
                        <div class="col-xs-3">
                            <div class="sidebar">
                                <a class="top">sidebar top</a>
                                <a class="bottom">sidebar bottom</a>
                            </div>
                        </div>
                        <div class="col-xs-9">
                            <div class="main"> <a class="top">main top</a>
                                <a class="bottom">main bottom</a>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="footer"> <a class="top">footer top</a>
                    <a class="bottom">footer bottom</a>

                </div>
            </div>

            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    Close
                </button>
                <button type="button" class="btn btn-primary">
                    Save changes
                </button>
            </div>
        </div>
    </div>
</div>

无法使用Modal内部的Sticky Kit粘贴元素

1 个答案:

谢谢