位置：固定在侧边栏 - 如何在页脚之前停止它？

我在我的侧边栏中使用jQuery浮动小部件 - 链接到我的文章http://www.product-investigation.com/fat-loss-factor-review - 如果向下滚动，您可以看到我的意思..我想在页脚之前停止我的adsense小部件...感谢您的帮助:)位置：固定在侧边栏 - 如何在页脚之前停止它？

我的JavaScript

<script> 
$(document).ready(function() { 
     function isScrolledTo(elem) { 
      var docViewTop = $(window).scrollTop(); //num of pixels hidden above current screen 
      var docViewBottom = docViewTop + $(window).height(); 
      var elemTop = $(elem).offset().top; //num of pixels above the elem 
      var elemBottom = elemTop + $(elem).height(); 
      return ((elemTop <= docViewTop)); 
     } 
     var catcher = $('#catcher'); 
     var sticky = $('#sticky'); 
     $(window).scroll(function() { 
      if(isScrolledTo(sticky)) { 
       sticky.css('position','fixed'); 
       sticky.css('top','100px'); 
      } 
      var stopHeight = catcher.offset().top + catcher.height(); 
      if (stopHeight > sticky.offset().top) { 
       sticky.css('position','absolute'); 
       sticky.css('top',stopHeight); 
      } 
     }); 
    }); 
    </script>

来源

2013-01-11 Chymmi

你有没有试过把'if（isScrolledTo（sticky））'放在'else'语句中？有点像'if（stopHeight> sticky.offset（）。top）{...} else {if（isScrolledTo（sticky））{...}} .. – dunli

不适用于我： – Chymmi

呃.. 。你能设置[jsfiddle]（http://jsfiddle.net）吗？我可以帮助你调试你的问题吗？ – dunli

我已经更新您的jsfiddle。我改变了你的条件了一句：

return ((elemTop <= docViewTop || elemTop >= docViewTop)); //Changed your return in isScrolledTo

说明：我在下面加将在footer的顶部位置的sticky格，如果我用你原来return声明和向上滚动，将sticky div的位置将代码在footer的顶部仍然是absolute。这是因为您的return声明只会检查元素的top位置是否小于或等于scrollTop()值，该值只能在scrolldown期间使用。在我的情况下，sticky已经在底部，isScrolledTo()也应该检查sticky div的top是否大于或等于scrollTop()的值。

并添加了一些东西，在.scroll()

$(window).scroll(function() { 
    if(isScrolledTo(sticky)) { 
     sticky.css('position','fixed'); 
     sticky.css('top','2px'); 
    } 
    var stopHeight = catcher.offset().top + catcher.height(); 
    var stickyFoot = sticky.offset().top + sticky.height(); 

    if(stickyFoot > footTop -10){ //Check if sticky's foot passes footer's top 
     console.log("Top of Footer"); 
     sticky.css({ 
     position:'absolute', 
     top: (footTop - 20) - sticky.height() 
     }); 
    } else { 
     if (stopHeight > sticky.offset().top) { 
     console.log("Default position"); 
     sticky.css('position','absolute'); 
     sticky.css('top',stopHeight); 
     } 
    } 
});

希望它能帮助。

来源

2013-01-12 03:18:41 dunli

** + 1 ** Excellent Answer！ – arttronics

@ arttronics：谢谢。 – dunli

感谢它的工作！:) – Chymmi

位置：固定在侧边栏 - 如何在页脚之前停止它？

回答

相关问题