Question

所以我添加了一个名为“booking-picker”的框，它应该在页面上向下滚动 - 但它会推动所有在他下面的元素，无论它们是什么。使用FYI 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

我在问题中使用了你的小提琴，并为你here稍微更新了一下。我所做的是为#flow-picker增加了一些css，见下文

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

背景颜色正好让您可以看到正在发生的事情。当您使用fixed职位时，您需要使用top，bottom，left和/或right属性指定职位。这告诉浏览器放置它的位置。它们将相对于浏览器窗口放置。

我删除了你的javascript，因为如果这是你想要实现的目标，你可以在没有javascript的情况下完成。通常情况下，只使用CSS就可以尝试使用纯CSS。

我制作了this fiddle我已经着色，以帮助向您展示它的工作原理。

Answer 2

我认为它需要绝对或固定的位置......

Answer 3

这是一个jsfiddle

Example

.booking-picker {
position:fixed;
right:5px;
display: block;
background:red;
}

浮动框正在推动其他一切 - 无限滚动

3 个答案: