Jquery follow scroll

Question

J'ai une sorte de barre latérale sur mon site Web, qui doit défiler vers le bas avec l'utilisateur pour qu'il soit toujours dans la vue.

Le code que j'utilise maintenant fonctionne correctement, mais il y a un problème. Sur les plus petits écrans, la barre latérale défile devant votre barre latérale, ce qui rend impossible de tout voir même si vous faites défiler. Donc, ce que je veux, c'est que la barre latérale défile avec le bas au lieu d'être poussée vers le bas avec le haut de sorte que lorsque vous atteignez la fin de la barre latérale, elle commence à défiler.

Ceci est le code que j'utilise actuellement.

var documentHeight = 0; 
var topPadding = 10; 
$(function() { 
    var offset = $("#mainright").offset(); 
    documentHeight = $(document).height(); 
    $(window).scroll(function() { 
     var sideBarHeight = $("#mainright").height(); 
     if ($(window).scrollTop() > offset.top) { 
      var newPosition = ($(window).scrollTop() - offset.top) + topPadding; 
      var maxPosition = documentHeight - (sideBarHeight); 
      if (newPosition > maxPosition) { 
       newPosition = maxPosition; 
      } 
      $("#mainright").stop().animate({ 
       marginTop: newPosition 
      }); 
     } else { 
      $("#mainright").stop().animate({ 
       marginTop: 0 
      }); 
     }; 
    }); 
}); 

Answer 1

Je suppose que les « meilleures pratiques » pour accomplir une telle tâche est d'utiliser la position de changement dynamique de css absolute à fixed et vice versa. Un exemple de base pourrait ressembler à:

$(function(){ 
    var $box = $('.box'), 
     offset = $box.offset(), 
     doc_h = $(document).height(); 

    $(window).scroll(function(){ 
     if($(window).scrollTop() > offset.top) { 
      if(!$box.hasClass('fix')) 
       $box.toggleClass('normal fix'); 
     } 
     else{ 
      if(!$box.hasClass('normal')) 
       $box.toggleClass('normal fix'); 
     } 
    }); 
});​ 

Exemple en action: http://www.jsfiddle.net/YjC6y/14/

Answer 2

$(function() { 
    var top = 50; 
    $(window).scroll(function() { 
    $('#box').stop().animate({ top: $(window).scrollTop() + top}, 1000); 
    }); 
}); 

Essayez l'exemple: http://jsbin.com/omiyi3

Answer 3

Je pense que vous pouvez plutôt faire la barre latérale réactive en lançant votre fonction en un de ceux-ci:

if (responsive_viewport >= 768) {} 

Cela fait en sorte que la fonction ne se charge que si la fenêtre est supérieure ou égale à 768px.