-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であるボディに2番目のdivを追加できます。このdivには絶対位置があり、画面の中央に配置されます。次に、ページのコンテンツ全体を自分の本文DIVに入れます。したがって、スクロールすると、ボディをスクロールしているように感じますが、実際にはボディ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=-80pxmargin-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 に答える