Search code examples
javascriptjquerycsstwitter-bootstrap-2affix

How to affix a div some offset from the screen top on scrolling?

I want to affix a div not at the screen top but some offset from the screen top. For example, the html looks like

<ul class='.sticky-header'>
  <li>...</li>
  <li>...</li>
  ..
</ul>

And the sticky header element is affixed at top using javascript below:

$('.sticky-header').affix({
    offset: {
             top: $('.sticky-header').offset().top
            }
 });

The above code affixes the ul element at the screen top on scrolling past the offset specified. But I need the div to be affixed not at the screen top but say 30px from the screen top. Is it possible?

Solution

  • I have managed to do it via css like below

    .sticky-header.affix{
    top:30px;
 }

    So when it gets fixed to the top, it is always 30px below the screen's top which is 0px.