0

ページに縦方向に中央揃えのスライドショーがありますが、小さな画面でページをスライドする高さについて話すために、どういうわけか「制限」を追加したいと考えています。

http://www.visioncreativegroup.com.au/demos/bps/index.php/production/theatre

ウィンドウのサイズを変更すると、スライドショーがナビゲーション バーとメイン ロゴの上に重なるようになります。基本的に、画面サイズが十分に小さいサイズに達したら、これらの要素のベースで停止する必要があります。

これは可能ですか？

4

3 に答える 3

0

サイトのスライドショーセクションとヘッダーセクションを分離します。つまり、ヘッダー、スライドショー、フッターの3つの水平スライスがあります。次に、スライドショーを中央のセグメントの中央に配置すると、ヘッダーを超えることはありません。

于 2012-08-24T07:18:28.360 に答える
0

私が用意したこの小さなデモを試してみて、プロジェクトの HTML を似たようなものに切り替えられるかどうかを確認してください。

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Demo</title>

            <!-- Insert below CSS here -->
            <!-- Insert JQuery here (http://code.jquery.com/jquery-latest.min.js) -->
            <!-- Insert below JS here -->
    </head>

    <body>
        <div id="shell">
            <div id="head">Header.</div>
            <div id="slideshow">Slideshow.</div>
            <div id="foot">Footer.</div>
        </div>
    </body>
</html>

CSS:(主にデモンストレーション用):

*{ margin: 0; padding: 0; }
div#head{ height: 200px; background: blue; }
div#foot{ height: 100px; background: red; }
div#slideshow{ height: 300px; background: green; }

JavaScript:

// Fix position initially and on each window resize.
$(window).resize(fix);
$(document).ready(fix);

function fix()
{
    // Work out position value.
    var base = $("div#slideshow").position().top;
    var middle = $(window).height() / 2;
    var hw = $("div#slideshow").height() / 2;

    // Position top either at the position determined above, or 0 if it bypasses the top of the page.
    var destination = Math.max(middle - base - hw, 0);
    $("div#shell").offset({ top: destination });
}

ここで完全な動作例を取得できます。

于 2012-08-24T07:39:17.760 に答える
0

クラスposition: absolute;から削除.production-scroll

また、不要な場合は削除position: fixed;してください#sticky-footer

于 2012-08-24T06:31:21.257 に答える