2

我有一个挑战要解决。我正在制作一个自动调整大小和粘性（顶部和底部）的 div。您可以在此处查看示例http://www.sixplus1.com/inventmx/sixplus1_b.html

问题是当我将窗口滚动到底部（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>
4

2 回答 2

0

这是同时使 div 具有粘性和自动调整大小的说明。

我将在http://rmz.sixplus1.com/blog/sticky.html上发布完整的代码和源代码

您必须包含 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");

    });

  });
于 2013-02-21T22:03:30.367 回答
0

查看您链接的实时版本，我确定您大部分时间都在那里......替换以下内容：

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

和

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

因为您在#content_derecha相对定位的父级 ( #content_derecha_superior) 中给出了绝对位置，所以绝对定位将相对于该父级的顶部（方便地，与顶部的位置相同#content）。

您正在确定相对于整个页面顶部的绝对位置posFreno，所以我只是减去了顶部的偏移量#content。

顺便说一句，您还应该为您的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' });
  }

这将使您的#content_derechadiv 更准确地适合窗口。或者，您可以更改调整大小功能：

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

于 2012-10-30T09:07:41.827 回答