Q:

Плавающий блок с position:fixed

На пальцах объяснить трудно, вот пикча, того что я хочу сделать:

Зеленые блоки это блоки с
   position:fixed;
Красные полоски - границы экрана;
Желтые блоки - это области в которых
   из которых не могут выйти зеленые
   блоки. Если листать выше или ниже, то
   зеленые блоки остаются на крайней
   границе желтых;

Каким способом лучше сделать?

A:

Рабочий пример

html

<div id="railway_lines">
    <div class="rails">
        <div class="truck"></div>
    </div>
    <div class="rails">
        <div class="truck"></div>
    </div>
</div>

css

div#railway_lines {
    background-color: #55c1ff;
    height: 1200px;
    position: relative;
}
div.rails, div.truck {
    width: 80px;
}
div.rails {
    background-color: #ffee33;
    height: 800px;
    position: absolute;
    top: 100px;
}
div.rails:first-child {
    left: 0;
}
div.rails:not(:first-child) {
    right: 0;
}
div.truck {
    background-color: #00ff00;
    position: fixed;
    height: 120px;
    top: 100px;
}

javascript

var truck = $(".truck"),
    rails = $(".rails"),
    css_top_onmove = $(rails[0]).css('top'),
    css_top_onhold = $(rails).height() - $(truck).height(),
    css_left = $(rails[0]).css('left'),
    css_right = $(rails[1]).css('right');

$(window).scroll(function () {
    var pos_top = $(window).scrollTop();

    if (pos_top > css_top_onhold) {
        $(truck).css({
            'position': 'absolute',
            'top': css_top_onhold + 'px'
        });

        $(truck[0]).css('left', css_left);
        $(truck[1]).css('right', css_right);
    } else {
        $(truck).css({
            'position': 'fixed',
            'top': css_top_onmove,
            'left': '',
            'right': ''
        });
    }
});

