Création d'une fonction Scroll Follow mais nécessité d'éviter qu'elle ne chevauche la fonction Footer Div

Question

J'ai créé une fonction qui change la 'position' d'un DIV en 'fixed' après un certain point de défilement. Le but est de le garder visible sur l'écran pendant le défilement de la page. Fonctionne bien (mais pas dans IE6).

Le problème est que lorsque j'arrive au bas d'une page, je ne veux pas que le DIV chevauche le pied de page. Je devine que je devrais changer la 'position' de 'fixed' en 'absolute', plaçant la propriété 'bottom' à quelque chose de légèrement plus grand que la hauteur du footer. Il est préférable de tester ce problème sur le this page. Assurez-vous que votre fenêtre est redimensionnée plus petit afin que vous puissiez voir la barre latérale chevauchant le pied de page.

Voici mon code à ce jour:

$(document).ready(function(){ 

    var element = $("#sidebar"); 
    var window_height = $(window).height(); 
    var element_height = element.height(); 

    // On scroll, set or unset the fixed position 
    $(window).scroll(function() { 
    if (window_height > element_height) { 
     if ($(document).scrollTop() > 220) { 
     element.css("position","fixed"); 
     element.css("top","9px"); 
     element.css("padding-top","0"); 
     } 
     else { 
     element.css("position","relative"); 
     element.css("top","0"); 
     element.css("padding-top","57px");  
     } 
    } 
    else { 
     element.css("position","relative"); 
     element.css("top","0"); 
     element.css("padding-top","57px"); 
    } 
    }); 

    // On window resize, set or unset the fixed position 
    $(window).resize(function(){ 
    window_height = $(window).height(); 
    if (window_height > element_height) { 
     if ($(document).scrollTop() > 220) { 
      element.css("position","fixed"); 
      element.css("top","9px"); 
      element.css("padding-top","0"); 
     } 
     else { 
      element.css("position","relative"); 
      element.css("top","0"); 
      element.css("padding-top","57px");  
     } 
    } 
    else { 
     element.css("position","relative"); 
     element.css("top","0"); 
     element.css("padding-top","57px"); 
    } 
    }); 

}); 

Answer 1

remplacer cette option si:

 
if ($(document).scrollTop() > 220) { 
    element.css("position","fixed"); 
    element.css("top","9px"); 
    element.css("padding-top","0"); 
} 

avec:

 
if(
$('#sidebar').position().top - $('#footer').position().top 
< $('#sidebar').height() 
) { 
    element.css("position","absolute"); 
    element.css("top", ''+$('#sidebar').position().top+'px'); 
    element.css("padding-top","0"); 
} 

Answer 2

je ne sais pas si mon quess est juste, mais peut-être vous shoukd contenir votre menu DIV à l'intérieur d'autres DIV et limiter le menuDIV mouvement aux limites de son DIV extérieur

Autre moyen pourrait être d'utiliser cette solution http://www.dogfeeds.com/?p=264

J'espère que cette aide

MTH

Answer 3

Merci pour vos réponses!

Je fini par mettre en œuvre cette solution comme:

$(document).ready(function(){ 

    var element = $("#sidebar"); 
    var window_height = $(window).height(); 
    var element_height = element.height(); 

    $(window).scroll(function() { 
    if (window_height > element_height) { 
     if (($(document).scrollTop() + element.height()) > ($(document).height() - $("#footer").height() - 9)) { 
     element.css("position","absolute"); 
     element.css("top", "auto"); 
     element.css("bottom","-60px"); 
     } 
     else if ($(document).scrollTop() > 220) { 
     element.css("position","fixed"); 
     element.css("top","9px"); 
     element.css("padding-top","0"); 
     element.css("bottom","auto"); 
     } 
     else { 
     element.css("position","relative"); 
     element.css("top","auto"); 
     element.css("padding-top","57px"); 
     element.css("bottom","auto");  
     } 
    } 
    else { 
     element.css("position","relative"); 
     element.css("top","auto"); 
     element.css("padding-top","57px"); 
     element.css("bottom","auto"); 
    } 
    }); 

    $(window).resize(function(){ 
    window_height = $(window).height(); 
    if (window_height > element_height) { 
     if (($(document).scrollTop() + element.height()) > ($(document).height() - $("#footer").height() - 9)) { 
     element.css("position","absolute"); 
     element.css("top", "auto"); 
     element.css("bottom","-60px"); 
     } 
     else if ($(document).scrollTop() > 220) { 
     element.css("position","fixed"); 
     element.css("top","9px"); 
     element.css("padding-top","0"); 
     element.css("bottom","auto"); 
     } 
     else { 
     element.css("position","relative"); 
     element.css("top","auto"); 
     element.css("padding-top","57px"); 
     element.css("bottom","auto");  
     } 
    } 
    else { 
     element.css("position","relative"); 
     element.css("top","auto"); 
     element.css("padding-top","57px"); 
     element.css("bottom","auto"); 
    } 
    }); 

});