2

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.com/ 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?

4
  • 2
    why do you not want to use position: fixed? Also, if you know the solution, you could try to code the solution yourself. 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
    Jan 8, 2014 at 20:56
  • Then change the 100% to 95% or something And please post some code and/or a fiddle.
    – Sebastien
    Jan 8, 2014 at 21:12
  • 1
    As an aside, try not to rely on jQuery plugins; it's easy to become dependent on them instead of writing the code yourself.
    – psdpainter
    Jan 8, 2014 at 21:13

1 Answer 1

4

EDIT 2021

My answer below is pretty old. I would not recommend 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);
    }
}
2
  • this is old but you should consider using requestAnimationFrame to get smoother animation
    – mr1031011
    Jan 31, 2018 at 14:24
  • Another approach could have been adding transform: translateX(0) to my container which would have made my fixed-position child calculating its width relative to the container instead of the viewport.
    – pmrotule
    Jan 31, 2018 at 15:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.