php - float 框将其他所有内容向下推 - 无限滚动

Question

所以我添加了一个名为“booking-picker”的框，它应该会随着您在页面上向下滚动——但它会推送他下面的所有元素，无论它们是什么。仅供引用 Bootstrap 使用。 http://jsfiddle.net/2m849oes/或者这是脚本:

    <script>
    $(function() {

        var $sidebar   = $("#flow-picker"), 
            $window    = $(window),
            offset     = $sidebar.offset(),
            topPadding = 15

        $window.scroll(function() {
            if ($window.scrollTop() > offset.top) {
                $sidebar.stop().animate({
                    marginTop: $window.scrollTop() - offset.top + topPadding
                });
            } else {
                $sidebar.stop().animate({
                    marginTop: 0
                });
            }
        });

    });
</script>

这是 html:

<div class="container">  
    <div class="row">BLABLABLABLABLA ........ 
    </div>
    <div class="booking-picker" id="flow-picker">
        <h3>Hello</h3>
        ETC......                    
    </div>    
</div>

后来我的页脚也被压下了。

这是CSS

.booking-picker {
  display: block;
  float: right;
}
#flow-picker {

}

谢谢!

Answer 1

我已经使用了问题中的 fiddle 并为您稍微更新了它 here .我所做的是向 #flow-picker 添加了一些 css，见下文

#flow-picker {
    position: fixed;
    top: 20px;
    right: 0;
    background: blue;
    color: white;
}

背景颜色只是让您可以看到发生了什么。当您使用 fixed 位置时，您需要使用 top、bottom、left 和/或 指定位置>右属性。这告诉浏览器把它放在哪里。它们将相对于浏览器窗口放置。

我删除了您的 javascript，因为如果这是您想要实现的目标，那么您可以在没有 javascript 的情况下完成。当仅使用 CSS 就可以完成时，通常最好尝试使用纯 CSS。

我做了this fiddle我给它上色以帮助向您展示它是如何工作的。