Redimensionnement automatique et collant (haut et bas) div jQuery

Question

J'ai un défi à résoudre. Je fais un redimensionnement automatique et div collant (haut et bas). Le problème est que lorsque je fais défiler la fenêtre vers le bas (où la div doit s'arrêter), la div disparaît, je pense que c'est dû à un problème de marge, donc j'ai besoin d'idées pour le résoudre. S'il vous plaît voir l'exemple et faites défiler la fenêtre vers la ligne du bas. TOUTE AIDE SERA HAUTEMENT APPRÉCIÉE.

je besoin pour ce faire dès que possible

Espérons que vous pouvez helpme et. est Heres le code ..

NOTE: Le div sur le nom de code #content_derecha a la classe collante

<script src="jquery-1.7.1.min.js" type="text/javascript"></script> 
<script> 
    $(document).ready(function(){ 

//I make the div with elastic properties 
var bottomPosition = $(window).height(); 
$('#content_derecha').height(bottomPosition); //in this example #content_derecha is the div that has to be elastic and sticky 

$(window).resize(function(){ 
    var bottomPositionN = $(window).height(); 
    $('#content_derecha').height(bottomPositionN); //the same div resizing its position when the window is resized 


}); 

//Here starts the evaulation to make the div sticky 

var footerFreno = $('.stop').offset().top; // returns the stop on top 
var stickyTop = $('.sticky').offset().top; // returns the stop on bottom. I have another div on footer with the class .stop 


if (!!$('.sticky').offset()) { //first the code verify if the sticky class exists 

//here I have a function to verify if the scroll position is between the values I need 

    function verificaRango(x, n, m){ 
     if (x >= n && x <= m) 
     { 
      return true; }else 
      { return false; 
      } 

    } 

    $(window).scroll(function(){ // Here I capture in a variable the position of the scroll 

     //Here I calculate the bottom of the sticky and auto reize the div 
     var arribaValor = $('.sticky').offset().top 
     var altoValor = $('.sticky').height(); 
     var posicionFreno = arribaValor + altoValor; 
     var windowTop = $(window).scrollTop(); // the position of the scrollbar 
     var posFreno = footerFreno-altoValor; 

     var semaforo = verificaRango(windowTop,stickyTop,posFreno); // I store in a variable named "semaforo" the result of the range verification to finally compare it in an if statement... 

     if (semaforo == true){ // I finally set the position fixed or static according the position nof the div... 
      $('.sticky').css({ position: 'fixed', top: 0 }); 
      } 
      else { 
       $('.sticky').css('position','static'); 
      } 

    }); 

    } 


}); 



</script> 

Answer 1

En regardant la version live vous LIÉ, j'ai déterminé que vous êtes la plupart du temps là-bas. .. remplacer:

//operaciones para freno absoluto 
var p =$('.sticky').position().top; 
var frenoAbsoluto = p-700; 

avec

//operaciones para freno absoluto 
var p = $('#content').position().top; 
var frenoAbsoluto = posFreno-p; 

Parce que vous donnez #content_derecha une position absolue dans un parent relativement positionné (#content_derecha_superior), le positionnement absolu sera par rapport au sommet de ce parent (idéalement, le même endroit que le haut de #content).

Vous étiez en train de déterminer la position absolue par rapport au haut de la page entière avec posFreno, donc j'ai juste soustrait le décalage au début de #content.

Soit dit en passant, vous devez également ajouter des ajustements pour les marges à votre switch(semaforo):

case true: 
    $('.sticky').css({ position: 'fixed', top: 0, 'margin-top': '0px' }); 
    break; 
case false: 
    if(stickyTop > windowTop){ 
    $('.sticky').css({ position: 'static', top: 0, 'margin-top': '5px' }); 
    } 

Cela rendra votre #content_derecha div adapter à la fenêtre avec plus de précision. Alternativement, vous pouvez modifier la fonction de modification de taille:

$(window).resize(function(){
var bottomPositionN = $(window).height();
$('#content_derecha').height(bottomPositionN-10);
});

Answer 2

Ce sont les instructions pour faire une div collant et autoresizing en même temps.

Je vais poster le code complet et la source à http://rmz.sixplus1.com/blog/sticky.html

Vous devez inclure jquery pour obtenir ce travail.

Ensuite, vous avez besoin de 3 classes.

1.- .sticky = the div that will have the sticky an autoresizing functions. 
2.- .head = the header of the page. 
3.- .stop = The footer of the page where you want the div stops 

4.- Is important that the html and body tags was its margin and padding as 0, for example 


html,body{ 
    // margin:0; 
    // padding: 0; 
    // 
    // } 

Voici le code

 $(document).ready(function(){ 
     //Se dimensiona el div segun el tamaño de la ventana inicial 
     var bottomPosition = $(window).height(); 
     var stickyAlto = bottomPosition; 
     $('.sticky').height(stickyAlto); 
     stickyAlto=$('.sticky').outerHeight(true); 

    //Funcion para verificar el rango 
     function verificaRango(x, n, m){ 
      if (x >= n && x <= m) 
      { 
       return true; }else 
       { return false; 
       } 

     } 


    var footerFreno = $('.stop').offset().top; 
    var stickyTop = $('.sticky').offset().top; 
    var headMargen = $('.head').height(); 
    var latosoStage = (footerFreno - stickyAlto) - headMargen ; 
    var stageCompleto = $(document).height(); 
    var arribaValor; 
    var altoValor; 
    var posicionFreno; 
    var windowTop; 
    var posFreno; 
    var semaforo; 
    var bottomPositionN; 

    if (!!$('.sticky').offset()) { 

     $(window).scroll(function(){ 

      //calcular la parte de abajo del sticky 
      arribaValor = $('.sticky').offset().top 
      altoValor = $('.sticky').height(); 
      posicionFreno = arribaValor + altoValor; 
      windowTop = $(window).scrollTop(); // la posicion del scrollbar 
      posFreno = footerFreno-altoValor; 
      semaforo = verificaRango(windowTop,stickyTop,posFreno); 

      switch(semaforo){ 

      case true: 
      $('.sticky').css({ position: 'fixed', top: 0 }); 
      break; 

      case false: 

       if(stickyTop > windowTop){ 
       $('.sticky').css({ position: 'static', top: 0 }); 

       } 

       if(posicionFreno > footerFreno){ 
       $('.sticky').css({ position: 'absolute', top: latosoStage }); 

       } 
      break; 
      } 
     }); 
     } 


    $(window).resize(function(){ 
     bottomPositionN = $(window).height(); 
     $('.sticky').height(bottomPositionN); 
     bottomPositionN=$('.sticky').outerHeight(true); 
     latosoStage = (footerFreno - bottomPositionN) - headMargen ; 
     $('#latoso').height(latosoStage); 
     stageCompleto = $(document).height(); 
     $('.sticky').css({ position: 'absolute', top: latosoStage }); 
     $(window).trigger("scroll"); 

    }); 

    });