在脚注Jquery处停止浮动DIV

Question

我用的是这个代码：

 $(window).scroll(function () {
  if (($(document).height() - $(window).scrollTop()) <= 500){
      $("#content-5").css({
          position: 'fixed',
          top: 'auto',
          bottom: '300px'
      });
  } else if ($(window).scrollTop() >= 30) {
      $("#content-5").css({
          position: 'fixed',
          top: '30px',
          bottom: 'auto'
      });
  }else{
      $("#content-5").css({
          position: 'absolute',
          top: '30px',
          bottom: 'auto'
      });
  }
});

这是演示

http://jsfiddle.net/Ym2Ga/75/

它的工作很好，但我不知道如何做，浮动div #内容-5停止在页脚。有人能帮忙吗？

Answer 1

将此添加到scroll()事件：

  // if the bottom of #content-5 reached the top of the footer
  if($(window).scrollTop() > $("#footer").offset().top - $("#content-5").height()) {
       $("#content-5").css({
          position: 'absolute',
          top: $("#footer").offset().top - $("#content-5").height(), // Place it above the footer
          bottom: 'auto'
      });
  }

演示： http://jsfiddle.net/Ym2Ga/82/

Answer 2

下面是使用解决方案更新的JSFiddle：http://jsfiddle.net/Ym2Ga/79/

守则：

    $(window).scroll(function () {
      var maxScroll = $(window).height()-$("#footer").height()-$("#content-5").height();
      if ($(window).scrollTop() >= maxScroll){
          $("#content-5").css({
              position: 'absolute',
              top: 'auto',
              bottom: '200px'
          });
      } else if ($(window).scrollTop() >= 30) {
          $("#content-5").css({
              position: 'fixed',
              top: '0px',
              bottom: 'auto'
          });
      }else{
          $("#content-5").css({
              position: 'absolute',
              top: '30px',
              bottom: 'auto'
          });
      }
  });

Answer 3

您可以得到页脚的顶部偏移量：

var footer_top= $("#footer").offset().top;

然后，您可以检查滚动，如果这比footer_top更多，您应该更改内容css，如下所示：

$("#content-5").css({
              position: 'absolute',
              top: footer_top,//this is important for exact place 
              bottom: 'auto'
          });  

琴键