滾動時在另一個div中居中div

-1

我正在嘗試將主導內容div中的導航居中並讓它在滾動時停留在那裏。我無法纏住我的頭的問題是，它需要parallaxy，因爲標題和頁腳。我有一個臨時環境http://stage.golishlaw.com/portfolio/滾動時在另一個div中居中div

我不能寫下來，我已經嘗試了一切，但一些最新的東西是：

var _mainHeight = (($(window).height()/2) - ($("#portfolio_nav").height()/2)) + (($("#main").offset().top - $(window).scrollTop())) 
$("#portfolio_nav").css({ 
    top: _mainHeight 
});

這其中的一些顯示器的大小而不是其他運作良好。

var mainScrollTop = (($(window).scrollTop() - $("#main").offset().top)); 
mainScrollTop = mainScrollTop > 0 ? 0 : mainScrollTop; 
var _mainHeight = ((($(window).height())/2 - $("#portfolio_nav").height()/2) + $("#main").offset().top) + mainScrollTop 
$("#portfolio_nav").css({ 
    top: _mainHeight 
});

這一個工作都有很好的，但資產淨值被困在某個點（我知道爲什麼我只是想不出如何讓它停留在屏幕中心）

我我真的已經把我的頭髮拉出來了，我已經試過了我能想到的一切。

來源

2012-09-01 locrizak

我真的不明白，你想它垂直和靜態中心在外部權利？不需要綁定滾動處理程序，也不需要爲此使用jQuery。 –

您能否提供一個關於如何在沒有jQuery的情況下做到這一點的例子。我不能使用固定的位置，因爲固定在瀏覽器上，我需要它在瀏覽器中的div內居中 – locrizak

@locrizak我發佈了一個沒有jQuery –

你已經定義的CSS左側位置上：absolute; left: 50%; margin-left: -401px;所以這個CSS添加到您的#portfolio_nav規則垂直居中：

top: 50%; 
margin-top: -80px;

製作肯定要註釋掉設置頂級CSS屬性的jQuery代碼，否則它將覆蓋CSS規則。

邊距計算：每個列表項具有圍繞40px（height + padding-bottom）這樣4 li * 40 = 160/2 = -80px margin-top。或者每次添加列表項時只減去20px。當然，如果您需要動態添加列表項，則可以通過jQuery在稍後設置marginTop來完成此計算。

如果你想要一個更精確的垂直中心，你可以做數學不考慮最後列表項的padding-bottom，因爲它的填充底部不可見。 margin-top:-70px稍微更集中。

更新垂直居中它在瀏覽器窗口，同時尊重容器限制：

$(function() { 
    var $pnav = $('#portfolio_nav'), 
     $w = $(window); 
    $pnav.css('top', 0); 
    $w.scroll(function() { 
     var $p = $pnav.parent(), 
      pptop = parseInt($p.css('paddingTop'), 10), 
      ppbottom = parseInt($p.css('paddingBottom'), 10), 
      pheight = $p.height(), 
      pnavheight = $pnav.height(); 
     $pnav.css('top', $w.height()/2 - ($p.offset().top + pptop) - pnavheight/2 + $w.scrollTop()); 

     var pnavpostop = $pnav.position().top; 
     if (pnavpostop < pptop) $pnav.css('top', pptop); 
     else if (pnavpostop + pnavheight > pptop + pheight + ppbottom) $pnav.css('top', pheight - pnavheight); 
    }).scroll(); 
});

Fiddle

來源

2012-09-01 18:50:57

+1教學 – sabithpocker

這是行不通的。如果整個容器都放在我正在做的頁面上，那麼這將起作用。我的問題是當內容區域大於頁面（當有滾動條時）是的，這將在div中垂直居中，但它不會居中在屏幕上 – locrizak

@locrizak是的，我讓它居中DIV。所以，當它沒有滾動條並且在窗口中居中時，你希望它在div中居中？你的問題是：'我試圖將主要內容div中的導航置於中心，並在滾動時讓它停留在那裏。「通過」滾動時卡住「我假定它根本不應該移動。你能否在你的問題上加上確切的預期行爲？ –

我會建議創建自己的身體DIV與溢出：滾動。附加到身體。然後，您可以將第二個div添加到您的中心div的正文中。這個div有一個絕對的位置，並在屏幕上居中。然後，將頁面的全部內容放入您自己的身體DIV中。所以當你滾動時，感覺就像你滾動身體，但實際上你正在滾動身體DIV。

來源

2012-09-01 18:28:34

我寧願沒有滾動條的div。 – locrizak

更改這些2你的頁面

#portfolio_nav { 
width: 200px; 
top: 300px; 
left: 50%; 
margin-left: -401px; 
position: fixed;     /*this line*/ 
} 


.page-template-portfolio-php #contentblock_tile, .contentcontainer_tile { 
    padding-bottom: 9px; 
    position: absolute;    /* this line */ 
    }

來源

2012-09-01 18:50:52

爲什麼你不垂直居中，就像你水平居中一樣。檢查@FabricoMatte回答 – sabithpocker

是的你，可以這樣做，我只是顯示位置固定在內部位置絕對會讓菜單停留在那裏，你可以混淆它的實際位置 –

不知道我是否做錯了什麼，但是當將您的規則添加到Chrome開發工具中，'position：fixed'仍然會隨瀏覽器窗口一起滾動。 –

滾動時在另一個div中居中div

回答

相關問題