-1

我试图将导航集中在主要内容 div 中，并在滚动时将其卡在那里。我无法解决的问题是，由于页眉和页脚，它需要有视差。我有一个暂存环境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
});

这个工作得很好，但导航卡在某个位置（我知道为什么我不知道如何让它卡在屏幕中央）

我真的一直在把头发拉出来，我已经尝试了我能想到的一切。

4

3 回答 3

0

我建议使用溢出创建自己的身体 DIV：滚动。将其附加到正文中。然后，您可以将第二个 div 添加到作为您的中心 div 的主体中。这个 div 有一个绝对位置并且在屏幕上居中。然后你把页面的全部内容放到你自己的body DIV中。所以当你滚动的时候，感觉就像是在滚动 body，但实际上你是在滚动 body DIV。

于 2012-09-01T18:28:34.167 回答
0

在您的页面上更改这 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-01T18:50:52.890 回答
0

您已经使用 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 margin-top。或者每次添加列表项时只需减去 20px。当然，marginTop如果您需要动态添加列表项，可以通过 jQuery 设置来完成此计算。

如果您想要一个更准确的垂直中心，您可以在不考虑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();
});

小提琴

于 2012-09-01T18:50:57.960 回答