Позиция, фиксированная для окна

Question

У меня есть учетная запись Tumblr, и я работаю над редактированием html ее. Мой вопрос заключается в следующем: как сделать боковую панель в определенной позиции, но затем, когда я прокручиваю страницу вниз, она остается там, где она относится к моему браузеру? Для примера того, что я говорю, нажмите задать вопрос и посмотреть «похожие вопросы», а затем прокрутить. Я бы предпочел, чтобы это было в CSS. Я уже пробовал все, что мог придумать.

http://snipt.org/AGff7

Вот код, который я начинаю с того, плюс мой пользовательский CSS, который находится в конце <style>

Я уже пытался position:fixed.

Я хочу, чтобы он начинался в середине окна браузера, а затем, когда я прокручиваю вниз, он попадает в верхнюю часть окна и остается неподвижным относительно окна.

Answer 1

Вам определенно понадобится использовать JS для этого, поскольку CSS не сможет обнаружить прокрутку. Вот основной пример:

<div id="scroller" class="floating"></div> 

Это наш оригинальный элемент, где он уже частично находится на странице и плавает посередине. стиль как

.floating{ 
    margin-top: 50px; 
} 

Затем мы должны использовать Javascript для того, чтобы измерить, когда пользователь прокрутил вниз (я сделал это с помощью JQuery)

$(window).scroll(function(){ 
    if($(this).scrollTop() > 50){ 
     $('#scroller').removeClass('floating'); 
     $('#scroller').addClass('fixed'); 
    }else{ 
     $('#scroller').addClass('floating'); 
     $('#scroller').removeClass('fixed'); 
    } 
}); 

, где у вас есть альтернативное заявление CSS для фиксированного например

.fixed{ 
    position: fixed; 
}