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

Question

So I add the box called "booking-picker" which is supposed to scroll down with you on the page -- but it pushes all the elements that are below him whatever they are. FYI bootstrap used. http://jsfiddle.net/2m849oes/ or Here is the script:

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

And here is the html:

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

And later I have the footer which is pushed down too.

And here is the CSS

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

}

Thanks!

Answer 1

I have used your fiddle from the question and updated it slightly for you here. what I have done is added some css to #flow-picker see below

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

The background colour is just so you can see what is going on. When you use fixed position you need to specify a position using top, bottom, left and/or right properties. This tells the browser where to place it. They will be placed relative to the browser window.

I removed your javascript because if this is what you are trying to achieve you can do it without javascript. Its normally better to try and use pure CSS for when it can be done using only CSS.

I have made this fiddle which i have coloured to help show you how it works.