I'm looking for a Javascript/jQuery plugin for sticky header that will not switch the element's style to position fixed. Usually, I'm working with this one / and it works fine.

I'm working on a website with jQuery animation and one of my div has a sticky header with width:100%. But when I move it to the left (for example), the width:100% is now based on the window's width and not his container.

So, is there an existing plugin that does the same thing as the others but keep the position: relative and calculate the scrollTop to apply as the margin-top for my sticky header?

I'm looking for a Javascript/jQuery plugin for sticky header that will not switch the element's style to position fixed. Usually, I'm working with this one http://stickyjs./ and it works fine.

I'm working on a website with jQuery animation and one of my div has a sticky header with width:100%. But when I move it to the left (for example), the width:100% is now based on the window's width and not his container.

So, is there an existing plugin that does the same thing as the others but keep the position: relative and calculate the scrollTop to apply as the margin-top for my sticky header?

• javascript
• jquery
• css-position
• sticky

• 2 why do you not want to use position: fixed? Also, if you know the solution, you could try to code the solution yourself. – MattDiamant Commented Jan 8, 2014 at 20:49
• Because my header has width:100% inside another div smaller that the window's width. When the div switch to position: fixed, it gets bigger (the width starts at the same point but goes until the window's edge) – pmrotule Commented Jan 8, 2014 at 20:56
• Then change the 100% to 95% or something And please post some code and/or a fiddle. – Sebastien Commented Jan 8, 2014 at 21:12
• 1 As an aside, try not to rely on jQuery plugins; it's easy to bee dependent on them instead of writing the code yourself. – psdpainter Commented Jan 8, 2014 at 21:13

1 Answer 1

EDIT 2021

My answer below is pretty old. I would not remend to use any JS code for that anymore but simply use CSS with position: sticky; which is much easier to implement, but also much more performant/smooth (note: Internet Explorer doesn't support position: sticky;).

Original answer

So, I solved my problem! Here's my javascript code:

You have to set top:0px as default

function relative_sticky(id, topSpacing){

if(!topSpacing){ var topSpacing = 0; }

var el_top = parseFloat(document.getElementById(id).getBoundingClientRect().top);
    el_top = el_top - parseFloat(document.getElementById(id).style.top);
    el_top = el_top * (-1);
    el_top = el_top + topSpacing;

    if(el_top > 0){
    document.getElementById(id).style.top = el_top + "px";
    } else{
    document.getElementById(id).style.top = "0px";
    }
}

window.onscroll = function(){

    relative_sticky("your_element_id", 10);
}

It's not very smooth in IE, so I add a delay:

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

window.onscroll = function(){
    
    if(BrowserDetect.browser == "Explorer" || BrowserDetect.browser == "Mozilla"){
    // or your own way to detect browser
    
        delay(function(){
        relative_sticky("admin_users_head", 31);
        }, 200);
    }
    else{
    relative_sticky("admin_users_head", 31);
    }
}