自动调整大小和粘性（顶部和底部）div jQuery_Jquery_Css

自动调整大小和粘性（顶部和底部）div jQuery

jquery css

自动调整大小和粘性（顶部和底部）div jQuery,jquery,css,Jquery,Css,我有一个挑战要解决。我正在制作一个自动调整大小和粘性（顶部和底部）div。您可以在这里看到示例问题是当我将窗口滚动到底部（div必须停止的地方）时，div消失了，我认为这是由于页边空白顶部的问题，所以我需要想法来解决它。请参见示例并将窗口滚动至底线。任何帮助都将受到高度赞赏我需要尽快完成这件事希望你能帮助我和你。这是密码注意：名为#content_derecha的代码上的div具有粘性类 <script src="jquery-1.7.1.min.js" type="text/ja

我有一个挑战要解决。我正在制作一个自动调整大小和粘性（顶部和底部）div。您可以在这里看到示例

问题是当我将窗口滚动到底部（div必须停止的地方）时，div消失了，我认为这是由于页边空白顶部的问题，所以我需要想法来解决它。请参见示例并将窗口滚动至底线。任何帮助都将受到高度赞赏

我需要尽快完成这件事

希望你能帮助我和你。这是密码

注意：名为#content_derecha的代码上的div具有粘性类

<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>


$（文档）.ready（函数（）{
//我用弹性属性制作div
var bottomPosition=$（窗口）.height（）；
$（“#content_derecha”）.height（bottomPosition）；//在本例中#content_derecha是必须具有弹性和粘性的div
$（窗口）。调整大小（函数（）{
var bottomPositionN=$（窗口）.height（）；
$（'#content_derecha'）.height（bottomPositionN）；//调整窗口大小时调整其位置的同一个div
});
//这里开始回避，使div变粘
var footerFreno=$（'.stop'）.offset（）.top；//返回顶部的停止
var stickyTop=$（'.sticky'）.offset（）.top；//返回底部的停止符。我在页脚上有另一个div，该div带有类.stop
if（！！$（'.sticky'）.offset（））{//首先，代码验证sticky类是否存在
//这里我有一个功能来验证滚动位置是否在我需要的值之间
函数（x，n，m）{
如果（x>=n&&x查看您链接的实时版本，我确定您大部分都在那里…替换以下内容：
//operaciones para freno absoluto
var p =$('.sticky').position().top;
var frenoAbsoluto = p-700;

与
因为您在相对定位的父级（\content\u derecha\u superior
）中为\content\u derecha\u提供了一个绝对位置，所以绝对位置将相对于该父级的顶部（方便地说，与\content
的顶部相同）
您使用posFreno
确定相对于整个页面顶部的绝对位置，因此我只减去#content
顶部的偏移量
顺便说一句，您还应该为开关（semaforo）
添加页边距调整：
这将使您的#content_derecha
div更准确地适应窗口。或者，您可以更改调整大小功能：
$（窗口）。调整大小（函数（）{


变量bottomPositionN=$（窗口）.height（）；


$（'content_derecha'）。高度（底部位置n-10）；


}）；

以下是同时使div变粘和自动调整大小的说明
我将发布完整的代码和源代码在
必须包含jquery才能使其正常工作
那么你需要3门课
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; 
    //
    //  }

这是密码
     $(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");

    });

  });

$（文档）.ready（函数（）{
//第二个维度是财政部
var bottomPosition=$（窗口）.height（）；
var stickyAlto=底部位置；
$（'.sticky'）。高度（stickyAlto）；
stickyAlto=$（'.sticky'）.outerHeight（真）；
//埃兰戈酒店
功能验证（x，n，m）{
如果（x>=n&&x windowTop）{
$（'.sticky'）.css（{position:'static'，top:0}）；
}
if（posicionFreno>footerFreno）{
$（'.sticky'）.css（{position:'absolute'，top:latosoStage}）；
}
打破
}
});
}
$（窗口）。调整大小（函数（）{
bottomPositionN=$（窗口）.height（）；
$（'.sticky'）。高度（底部位置n）；
bottomPositionN=$（'.sticky'）.outerHeight（true）；
latosoStage=（footerFreno-底部位置n）-头部边缘；
$（'#latoso'）。高度（latoso阶段）；
stageCompleto=$（document.height（）；
$（'.sticky'）.css（{position:'absolute'，top:latosoStage}）；
$（窗口）.trigger（“滚动”）；
});
});
有一个简单的JQuery插件，名为。在定义侧边栏高度后，只需同时触发窗口内的插件resize。下面是一个演示：Joequincy感谢您的回复。很抱歉我的回复延迟。最后，我通过以下代码得到了结果。希望它能帮助其他人。
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; 
    //
    //  }

     $(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");

    });

  });