位置：固定在側邊欄 - 如何在頁腳之前停止它？

我在我的側邊欄中使用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

位置：固定在側邊欄 - 如何在頁腳之前停止它？

回答

相關問題