Как сделать div фиксированным на определенном уровне прокрутки

Question

Я хочу, чтобы конкретный бок div фиксировался на определенном уровне прокрутки, идеальным примером является панель «Как форматировать» на правой стороне стека oveflow ask question page. Просто попробуйте задать вопрос для просмотра. Как это возможно ? с css или jquery.

Answer 1

этот учебник поможет вам. http://css-tricks.com/scrollfollow-sidebar/

или

этот

HTML

<div id="header">HEADER</div> 
<div id="content"> 
    <div id="left">LEFT</div> 
    <div id="right">RIGHT</div> 
</div> 
<div id="footer">FOOTER</div> 

JS

$(function() { 
    var $sidebar = $("#right"), 
     $window = $(window), 
     rightOffset = $sidebar.offset(), 
     rightDelta = $("#footer").offset().top - $("#header").offset().top - $("#header").outerHeight() - $("#right").outerHeight(), 
     topPadding = 15; 

    $window.scroll(function() { 
      $sidebar.stop().animate({ 
       marginTop: Math.max(Math.min($window.scrollTop() - rightOffset.top + topPadding, rightDelta), 0) 
      }); 
    }); 

}); 

рабочих demo, например 2

вы можете выбрать базу по вашим потребностям, надеюсь, это может вам помочь.

Answer 2

Вот простой пример того, как это сделать, мы слушаем событие windowonscroll и если $(window).scrollTop() выше определенного порога, мы добавим .fixed класс нашей боковой панели, в противном случае удалить его. Набор .fixed устанавливает position:fixed так, чтобы он пал. Проверьте скрипт для полного рабочего примера.

jsFiddle

JS

$(window).scroll(function() { 
    var threshold = 100; 
    if ($(window).scrollTop() >= 100) 
     $('#sidebar').addClass('fixed'); 
    else 
     $('#sidebar').removeClass('fixed'); 
}); 

CSS

#sidebar { 
    position:absolute; 
    width:80px; 
    background-color:#0F0; 
    height:200px; 
} 

#sidebar.fixed { 
    position:fixed; 
    top:0; 
} 

HTML

<header> 
    I'm the header 
</header> 
<div id="container"> 
    <aside id="sidebar"> 
     I'm a sidebar 
    </aside> 
    <section id="content"> 
     ... 
    </section> 
</div> 

Answer 3

$(document).ready(function(){ 
    var my_scrol_position = 220; 
    $("#my_div_name").scrollTop(my_scrol_position); 
}); 

убедитесь, что ваш div имеет css с overflow:auto