如何順利地防止固定元素滾動通過指定元素

本質上，我想要做的就是始終將我的博客文章的元信息保留在屏幕上。實際上，元信息（標題，作者等）顯示在帖子內容的左側，並且當我向下滾動時，我已經將元信息設置在屏幕上平滑地保留在屏幕上的位置。然而，我有一個問題：如何順利地防止固定元素滾動通過指定元素

我不能順利地將它而不是滾動#comments DIV。它要麼重疊，要麼很激動，這取決於我如何調整代碼。

這裏是JS功能我用：

function brazenlyScroll() { 
    var element = jQuery(".single-post .headline_area"); 
    var top = element.offset().top - 50; 
    var elementHeight = 26 + element.height(); 
    var maxTop = jQuery("#comments").offset().top - elementHeight; 
    var scrollHandler = function() { 
     if (jQuery(document).width() > 1035) { 
      var scrollTop = jQuery(window).scrollTop(); 
      if (scrollTop<top) { 
       element.css({position:"relative",top:""}) 
      } else if (scrollTop>maxTop) { 
       element.css({position:"absolute",top:(maxTop+"px")}) 
      } else { 
       element.css({position:"fixed",top:"50px"}) 
      } 
     } 
    } 
    jQuery(window).scroll(scrollHandler); 
    jQuery(window).resize(scrollHandler); 
    scrollHandler(); 
}

該代碼通過一個外部JS文件包括，被稱爲在頁面的底部。你可以在這裏看到所有這些：http://www.rickbeckman.org/dumber-and-dumber-and-dumber/

任何幫助將不勝感激。

來源

2013-07-01 Rick Beckman

當元塊達到maxTop時，您可以通過給它一個300px的填充來使註釋div縮小到正確的位置。

來源

2013-07-01 04:49:52 SajithNair

我不想縮小評論塊。元塊到達其容器DIV的底部時應停止滾動。滾動問題會在窗口縮小到足以導致水平滾動時導致水平滾動。帖子內容在元信息後面移動。我想，我需要元塊具有絕對或相對的固定寬度和固定的垂直間距。我不知道該怎麼做。 –

我只是測試我們的代碼，並能夠通過改變26到一個更大的數以固定的重疊，例如約60

變種elementHeight = 26 + element.height（）;

希望這會有所幫助。

來源

2013-07-31 23:30:19 BRS

如何順利地防止固定元素滾動通過指定元素

回答

相關問題