2009-11-14 8 views
0

How can I have a sliding menu div that doesn't move unless the page is scrolled down past a certain pointcomment arrêter flottant (coulissant) div au pied de page

i utilisé le code de ce lien pour un menu flottant. il a comment arrêter le flotteur d'arrêt à l'en-tête, mais pas au pied de page. comment puis-je modifier ce code pour arrêter au pied de page?

//// CONFIGURATION VARIABLES: 

var name = "#sidebar"; 
var menu_top_limit = 0; 
var menu_top_margin = 0; 
var menu_shift_duration = 500; 
var menuYloc = null; 
/////////////////////////////////// 

$(window).scroll(function() 
{ 
// Calculate the top offset, adding a limit 
offset = menuYloc + $(document).scrollTop() + menu_top_margin; 

// Limit the offset to 241 pixels... 
// This keeps the menu out of our header area: 
if(offset < menu_top_limit) 
    offset = menu_top_limit; 

// Give it the PX for pixels: 
offset += "px"; 

// Animate: 
$(name).animate({top:offset},{duration:menu_shift_duration,queue:false}); 
}); 

J'ai un autre code similaire qui est censé arrêter au pied de page, mais il ne fonctionne pas:

var name = "#sidebar"; 
var menuYloc = null; 
var footer = '#footer'; //Specify the ID for your footer. 

$(document).ready(
    function() 
    { 
     menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px"))) 
     $(window).scroll(
      function() 
      { 
       var offset = menuYloc + $(document).scrollTop(); 
       var anotherOffset = offset; 

       var docTop = $(window).scrollTop(); 
       var footerTop = $(footer).offset().top; 

       var maxOffset = footerTop - $(name).height() - 20; 
       var minOffset = docTop; 

       offset = offset > maxOffset ? maxOffset : offset; 
       offset = offset < minOffset ? minOffset : offset; 

       $(name).animate({top:offset + 'px'},{duration:500,queue:false});  
      } 
     ); 
    } 
); 

Répondre

0

Si vous êtes à la recherche de la façon de garder le pied sur le fond et un défilement milieu, je pense que je l'ai fait voir mon article de blog ci-dessous (sous la section "Sur la page Web") Allez à http://www.jimleo.com pour le voir en action.

http://jimleonardo.blogspot.com/2009/02/jimleocom-is-back-up-some-how-to.html

+0

pas vraiment, Jim, mais merci pour la réponse rapide. J'ai un menu de nav flottant délibérément afin que les utilisateurs n'aient pas à revenir en haut, mais il chevauche le pied de page quand j'arrive au fond. la solution la plus simple est de réduire le pied de page (de 300px à 241px recommandé), mais je suis assez têtu pour vouloir l'essayer avec du code. – Matt

0

On dirait que vous voulez un pied de page qui est toujours visible. Ne serait-il pas plus facile de créer deux éléments absolus, un en haut de la page et un en bas. Et puis ajoutez tout votre contenu à un div qui a 100% de largeur/hauteur (à faire avec javascript).

Ensuite, vous n'avez pas besoin d'ajouter des éléments à l'événement de défilement du corps (cela n'a jamais l'air très bien).

Si vous ajoutez un décalage, ou quelques sauts de ligne avant et après votre contenu, cela devrait fonctionner beaucoup mieux que ce que vous essayez.

Je l'ai fait avec my own page here.

+0

non. J'ai un menu flottant intentionnel comme vu ici: http://www.kingtray.com/ – Matt