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＃content-5停在页脚。有人可以帮忙吗？

Answer 1

以下是您使用解决方案更新的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 2

将其添加到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 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'
          });

jsfiddle link

在页脚Jquery上停止Float DIV

3 个答案: