css - 固定位置 div 的背景超出弹出窗口的边缘

Question

我创建了一个可滚动的弹出窗口，它使用 jQuery 插件在用户滚动时将按钮固定在窗口顶部。除了一个小问题外，这是有效的……我放在包含按钮的 div 上的白色背景(为了防止看到按钮下方滚动的内容)超出了右边缘弹出窗口。我在 Chrome 和 Firefox 中都试过了，它们都做同样的事情。这个问题有 CSS 解决方案吗？

这是我的 fiddle - 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
    });
});

谢谢。

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');
});