фиксированное положение CSS, когда в позиции x

Question

У меня есть div, расположенный в верхней части страницы, прямо под заголовком. Когда пользователь прокручивается вниз, а панель поднимается, я бы хотел, чтобы она поднималась только до края окна браузера, а затем оставалась там, как если бы она была исправлена.

Как это возможно? Возможно ли это с помощью CSS или мне нужен jQuery? Я бы предпочел jQuery для кросс-браузерной совместимости.

Вот простой и простой код CSS я использую до сих пор:

#fbLikeDiv 
{ 
    position: fixed; 
    top: 95px; 
    left: 10px; 
} 

Вы также можете посмотреть на сайте: www.myskoob.com/postish/ - это о левой Facebook как ящик, который хотел бы остановиться на верхнем краю окна браузера, когда пользователь прокручивается вниз, но сначала поднимается вверх до него.

Answer 1

Я думаю, что это то, что вы ищете: http://jsfiddle.net/QuVkV/3/

Вы должны использовать некоторые JQuery. В приведенном выше примере, следуют DIV с идентификатором = "бар"

Здесь HTML структура:

<div id='wrapper'> 
    <div id='upper'>This is upper content</div> 
    <div id='position-saver'> 
     <div id='bar'>This is your facebook like button</div> 
    </div> 
    <div id='lower'>This is some content lower than the menu bar</div> 
</div> 

Это CSS:

#wrapper { 
    width: 100%; 
    height: 2000px; 
} 

#upper { 
    width: 100%; 
    height: 100px; 
} 

#position-saver { 
    height: 50px; 
    width: 100%; 
} 

#bar {  
    position: static; 
    height : 50px; 
    width: 100%; 
} 

А вот JavaScript:

$(document).on('scroll', function(){ 
    if ($('#bar')[0].offsetTop < $(document).scrollTop()){ 
     $("#bar").css({position: "fixed", top:0});    
    } 
    if ($(document).scrollTop() < $("#position-saver")[0].offsetTop){ 
     $("#bar").css({position: "static", top: 0});   
    }    
});