Question

我正在尝试将导航集中在主内容div中，并在滚动时将其固定在那里。我无法解决的问题是，由于页眉和页脚，它需要是parallaxy。我有一个临时环境http://stage.golishlaw.com/portfolio/

我不能写下我尝试的所有内容，但最近的一些内容是：

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
});

这个工作得很好但导航卡在某个位置（我知道为什么我只是无法弄清楚如何将它卡在屏幕的中心）

我真的一直把头发拉出来，我已经尝试了所有我能想到的东西。

Answer 1

我建议用溢出创建你自己的身体DIV：滚动。将它贴在身上。然后你可以在身体上添加第二个div作为你的中心div。该div具有绝对位置，并以屏幕为中心。然后你将页面的全部内容放入你自己的身体DIV中。因此，当您滚动时，感觉就像滚动身体一样，但实际上您正在滚动身体DIV。

Answer 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 */
  }

Answer 3

您已使用CSS定义左侧位置：absolute; left: 50%; margin-left: -401px;因此请将此CSS添加到#portfolio_nav规则中以使其垂直居中：

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

确保注释掉设置顶级CSS属性的jQuery代码，否则它将覆盖CSS规则。

margin-top calc ：每个列表项都有40px（height + padding-bottom），所以4 li * 40 = 160/2 = -80px {{ 1}}。或者每次添加列表项时减去20px。当然，如果您需要动态添加列表项，可以通过jQuery设置margin-top来完成此计算。

如果你想要一个更准确的垂直中心，你可以做数学不考虑最后一个列表项的marginTop，因为它的填充底部是不可见的。 padding-bottom稍微集中一点。

更新，在尊重容器限制的同时，在浏览器窗口中将其垂直居中：

margin-top:-70px

Fiddle

在滚动时将div放在另一个div中

3 个答案: