在頁腳固定浮動元素停止

我使用http://jqueryfordesigners.com/fixed-floating-elements的代碼在滾動到某個點後浮動元素。以下是我正在處理的網站：http://bodyecology.com/articles/gut-type-update 在頁腳固定浮動元素停止

正如您所看到的，右側列在滾動時變得固定，但在頁腳重疊。我怎樣才能讓它停在頁腳之上？

目前正在使用：

<script> 
    jQuery(document).ready(function() { 
    var top = jQuery('#news_sidebar').offset().top - parseFloat(jQuery('#news_sidebar').css('marginTop').replace(/auto/, 0)); 
    jQuery(window).scroll(function (event) { 

     var y = jQuery(this).scrollTop(); 

     if (y >= top) { 

     jQuery('#news_sidebar').addClass('fixed'); 

     } else { 

     jQuery('#news_sidebar').removeClass('fixed'); 
    } 
    }); 
}); 
</script>

來源

2011-05-23 markramos83

這撥弄做你在找什麼：

http://jsfiddle.net/ZczEt/9/

這裏是右側手柄浮動元素$（ '＃摘要'）的JavaScript：

$('#summary').scrollToFixed({ 
    marginTop: 
     $('.header').outerHeight() + 10, 
    limit: 
     $('.footer').offset().top - 
     $('#summary').outerHeight() - 
     10 
});

這裏是jQuery的插件及其來源：

https://github.com/bigspotteddog/ScrollToFixed

來源

2011-09-04 00:25:05 bigspotteddog

像魅力一樣工作，謝謝！ – markramos83 2011-12-06 16:33:53

很高興工作。這是一個有趣的要求弄清楚:) – bigspotteddog 2011-12-12 19:07:25

@bigspotteddog我很尷尬，如此無恥地劫持這條評論線程，但我想不出另一種方式來私下給你發消息。我很努力地使用你的插件scrolltofixed正確。如果你想快速看看[我的這個stackoverflow問題]（http://stackoverflow.com/questions/10987447/scroll-multiple-sidebar-divs-down-the-screen-like-9gag-com-does/ 10989465）我會永遠感激。 – billmalarky 2012-06-16 09:29:42

我可能是錯的，但它似乎是正確的側邊欄裏面的內容的大小。它重疊，因爲它太大，而不是當你滾動到底部時。

您可以在底部放置相同的停止位置並重新放置在頂部。當您滾動到頂部時，它會重新定位。嘗試用於頁腳。

來源

2011-05-23 20:49:21 tahdhaze09

是的，我改變了它，所以它不是那麼大。設想你的視口要小得多，並且元素會重疊頁腳。我想把它做得更大，但要在頁腳之前停下來。我會在腳本中添加什麼來阻止腳註？ – markramos83 2011-05-26 15:06:40

我已將此頁面添加爲我想要做的示例：http://bodyecology.com/example.html。注意元素現在更長，所以它重疊了頁腳。 – markramos83 2011-05-26 16:49:59

我有相同的代碼，你浮我的DIV 從同一崗位「固定 - 浮動元素」

，並有同樣的問題，因爲你有重疊的頁腳，唯一的解決辦法爲我工作（我「M一個javascript newvie）從頁腳與此代碼拉動DIV遠：

$(window).scroll(function() { 

      // distance from top of footer to top of document 
      footertotop = ($('#footer').position().top); 
      // distance user has scrolled from top, adjusted to take in height of sidebar (570 pixels inc. padding) 
      scrolltop = $(document).scrollTop() + 570; 
      // difference between the two 
      difference = scrolltop - footertotop; 

      // if user has scrolled further than footer, 
      // pull sidebar up using a negative margin 

      if (scrolltop > footertotop) { 

       $('#cart').css('margin-top', 0 - difference); 
      } 

      else { 
       $('#cart').css('margin-top', 0); 
      } 


     });

這對我很有幫助，我希望別人會發現它的幫助:) 我實現它在我的網站，以便用戶可以得到full articles view

來源

2013-02-02 07:26:32

在頁腳固定浮動元素停止

回答

相關問題