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

所以我添加了一个名为“booking picker”的框，它应该在页面上与您一起向下滚动——但它会推送他下面的所有元素，不管它们是什么。 仅供参考，已使用引导程序。 或 以下是脚本：

    <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>

---

谢谢

我相信它需要一个绝对的或固定的位置…

我已经使用了你的问题中的小提琴，并为你稍微更新了一下。我所做的是将一些css添加到

#flow picker

中，见下文

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

背景色只是为了让你能看到发生了什么。使用

固定

位置时，需要使用

顶部

、

底部

、

左侧

和/或

右侧

属性指定位置。这将告诉浏览器将其放置在何处。它们将相对于浏览器窗口放置

我删除了你的javascript，因为如果这是你想要实现的，你可以不用javascript。通常最好尝试使用纯CSS，因为它只能使用CSS

我做了一个我涂过颜色的东西来帮助你展示它是如何工作的

这是一个jsfiddle

---

结束div标记太多。它就在这里，或者也在你的代码里？我们可以用小提琴吗听起来很脏，但我希望你明白我的意思。对不起，你说的小提琴是什么意思？@commandtpa，这表明你的问题在行动中。但是，我认为您需要使用前面提到的

fixed

位置。当您使用fixed时，请记住指定

高度

和

宽度

，您还需要使用'top'而不是

边距顶部

。但这取决于你在追求什么，这就是为什么小提琴会帮助我们：）@DavidT谢谢你的帮助。我确实尝试了fixed，但即使我指定了一个高度和宽度，它也会消失…fixed会更好。每当我使用fixed时，整个元素都会从页面上消失…：/非常感谢你！！它现在可以工作了，奇怪地滚动——这意味着我的屏幕上的乳房设置——但我想我可以在js中调整它。快速一想，为什么在使用

float

时，.booking picker元素不起作用，它与id#flow picker？@commandantp一起工作，而您的元素仍然在DOM的“flow”中，这意味着其他元素的位置会受到

.date picker

的影响，通过使用

position:fixed

您将元素从DOM的自然流中移除。所以它不会：）嗯，好吧！在我的应用程序中，我必须保持js，并将位置与您所说的所有其他内容一起设置为绝对位置，现在我完全得到了我所需要的！在所有这些方面仍然非常新，因此感谢您的耐心和帮助；）

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

}

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

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