Question

我创建了一个可滚动的弹出窗口，当用户滚动时，该弹出窗口使用jQuery插件将按钮固定在窗口顶部。除了一个小问题之外，这个工作正常...我放在包含按钮的div上的白色背景（为了防止看到按钮下方滚动的内容）延伸到弹出的右边缘之外起来。我已经在Chrome和Firefox中尝试了这一点，他们都做了同样的事情。是否有解决此问题的CSS解决方案？

这是我的小提琴 - http://jsfiddle.net/donnapep/NhmvH/2/

HTML

<div class="overlay"></div>
<div class="wrapper container modal-content">
    <div>
        <h1>Weather Settings</h1>
        <div class="sticky-wrapper">
            <div class="btn-toolbar sticky-buttons">
                <button id="save" class="btn btn-primary" type="button">Save</button>
                <button id="cancel" class="btn btn-primary" type="button">Cancel</button>
                <button id="help" class="btn btn-primary" type="button">Help</button>
        </div>
    </div>
</div>
<form role="form">
    <div class="row">
        <div class="col-md-7">
            <div class="form-group">
                <label for="layout">Layout</label>
                <div class="radio">
                    <input type="radio" name="layout" value="current" data-url="http://s3.amazonaws.com/Widget-Weather-Test/current.html" checked="checked">
                    <img src="http://s3.amazonaws.com/Widget-Weather-Test/images/thumbs/current-vertical.png" class="img-thumbnail">
                    <img src="http://s3.amazonaws.com/Widget-Weather-Test/images/thumbs/current-horizontal.png" class="img-thumbnail">
                </div>
                <div class="radio">
                    <input type="radio" name="layout" value="three-day" data-url="http://s3.amazonaws.com/Widget-Weather-Test/three-day.html">
                    <img src="http://s3.amazonaws.com/Widget-Weather-Test/images/thumbs/three-day-vertical.png" class="img-thumbnail">
                    <img src="http://s3.amazonaws.com/Widget-Weather-Test/images/thumbs/three-day-horizontal.png" class="img-thumbnail">
                </div>
                <div class="radio">
                    <input type="radio" name="layout" value="current-and-three-day" data-url="http://s3.amazonaws.com/Widget-Weather-Test/current-and-three-day.html" checked="checked">
                    <img src="http://s3.amazonaws.com/Widget-Weather-Test/images/thumbs/current-and-three-day-vertical.png" class="img-thumbnail">
                    <img src="http://s3.amazonaws.com/Widget-Weather-Test/images/thumbs/current-and-three-day-horizontal.png" class="img-thumbnail">
                </div>
            </div>
        </div>
    </div>
</form>

CSS

.overlay {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
}
.wrapper {
    z-index: 2;
    width: 90%;
    height: 500px;
    margin: 20px auto 0;
    overflow: auto;
}
.sticky-buttons {
    z-index: 10;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #fff;
}

的Javascript

$(document).ready(function () {
    $(".sticky-buttons").sticky({
        container: $(".wrapper"),
        topSpacing: 21
    });
});

THX。

Answer 1

<强> http://jsfiddle.net/4eAeA/

查看该插件的 docs ，您可以使用getWidthFrom作为选项参数。

$(document).ready(function () {
    $(".sticky-buttons").sticky({
        container: $(".wrapper"),
        topSpacing: 21,
        getWidthFrom : $(".wrapper")
    });
});

@donnapep，我从该插件中看到的缺点是它不会在调整大小时保持宽度。

你还需要这样的东西：

var _stickybuttons = $(".sticky-buttons");
$(window).resize(function () {
   _stickybuttons.sticky('update');
});

Answer 2

我将你的jquery改为：

$(document).ready(function () {
    $(".sticky-wrapper").sticky({
        container: $(".wrapper"),
        topSpacing: 21
    });
});

有些position:absolute;到

.wrapper.container.modal-content

这样它就不会向右延伸和

width:100%;
z-index:20;

.sticky-wrapper

中的

小提琴： http://jsfiddle.net/NhmvH/9/

它现在向左移动，但你明白了。

不知道是否通过更改插件更容易，但无论如何我希望它有所帮助。

固定位置div的背景超出了弹出边缘

2 个答案: