JavaScript / JQuery Sticky senza usare la posizione CSS: fisso

Question

Sto cercando un plugin JavaScript / JQuery per intestazione appiccicosa che non cambierà lo stile dell'elemento in posizione fisso.Di solito, sto lavorando con questo http://stickyjs.com/ e funziona bene.

Sto lavorando su un sito Web con JQuery Animation e uno dei miei div ha un'intestazione appiccicosa con larghezza: 100%.Ma quando lo spostano a sinistra (ad esempio), la larghezza: il 100% è ora basato sulla larghezza della finestra e non il suo contenitore.

Allora, esiste un plugin esistente che fa la stessa cosa degli altri, ma mantieni la posizione: relativa e calcola la scrolltop per applicare come il margine-top per la mia intestazione adesiva?

Answer 1

Allora, ho risolto il mio problema!Ecco il mio codice JavaScript:

Devi impostare Top: 0px come predefinito

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);
}

.

Non è molto liscio in IE, quindi aggiungo un ritardo:

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);
    }
}

.