3

私がやりたいことを示すために、ここにURLがあります。http://octopuscreative.com。

高さを下にスクロールすると、上記のウェブサイトのようにシアンの div が消えるものが欲しいです。

現在、コードでスクロールが機能していますが、 #main divの下にある残りの HTML が表示されません。これが私の新しい#slideshow div (固定位置) と関係があるかどうかはわかりません。#slideshow divが にheight縮小されたので、 #main div0の下に HTML が表示されると思いましたが、下に表示されるのはすべて白です。

var header = $('#slideshow'),
headerH = header.height();

$(window).scroll(function() {
if (header.height() >= 0) {
    header.css({
        height: -($(this).scrollTop() - headerH), position: 'absolute'
    });
}
else if (header.height() < 0 ) {
header.css('height', 0);
header.css('position', 'absolute');
}
});


    </script>
</head>
<body>

    <div id="top">

        <div id="stallion">
            <img id="stallionpic" src="stallion1.png" />
            <h1 class="h1">Stallion Stride</h1>
            <div id="navigation">
            <ul>
                <li><a href="google.com" id="first">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Register</a></li>
                <li><a href="" id="last">Contact Us</a></li>
            </ul>
            </div>
        </div>
    </div>
    <div id="main">
        <div id="slideshow">
            <div id="leftbutton"></div>
            <div id="rightbutton"></div>
            <div id="slideshownav">
                <ul>
                    <li><a class="active"></a></li>
                    <li><a></a></li>
                    <li><a></a></li>
                    <li><a></a></li>
                </ul>
            </div>
        <div id="slideshow_inner">

            <li id="pic1"><a><img src="pic2.jpg" /></a></li>
            <li id="pic2"><a><img src="pic1.jpg" /></a></li>
            <li id="pic3"><a><img src="pic3.jpg" /></a></li>
            <li id="pic4"><a><img src="pic4.jpg" /></a></li>

        </div>
        <p>a;lsdfja;lskdjf;laskdjf;aslkdjf;alsdjkfa;sldfkja;sldkfja;sldkfja;</p>
        </div>

        <div id="mainContent">
            <p>a;lsdfja;lskdjf;laskdjf;aslkdjf;alsdjkfa;sldfkja;sldkfja;sldkfja;</p>
        </div>
    </div>
    <div id="footer">

    </div>
</body>

4

2 に答える 2

3

私は Octopus の主任開発者です。これは、ヘッダー効果のようなものを機能させるための最小限のコードです (固定位置を使用します)。

HTML

<div id="hero">
    <h2>I am the hero</h2>
</div>
<div id="main-content">
    <h3>I am the main content</h3>
</div>

CSS

* {
    margin: 0;
}

div#hero {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #3D6AA2;
    height: 300px;
}

div#main-content {
    height: 1500px;
    background: #fff;
    margin-top: 300px;
    position: relative;
    z-index: 1;
}

また、それを示す jsFiddle と、サイトで行われている少しの視差要素をまとめました: http://jsfiddle.net/paulstraw/FW4FF/

それが役立つことを願っています!

于 2013-08-16T19:19:41.023 に答える
1

position: fixed;表示可能な画面座標に基づいて要素を配置するため、スクロールすると、位置が更新されて「新しい」上/左境界が反映されます。position: absolute;あなたが説明しているものに似ていますが、周囲のコンテンツやブラウザのスクロール位置に関係なく、要素を同じ場所に保持します。ただし、これにより要素がページの「フロー」から除外され、他の要素が存在しないように動作します (また、重複する可能性があります)。その場合、floatheader left: を実行するだけで運が良くなる可能性がありますfloat: left;。

mainこれを行う場合、css style: を追加して、divのフロートをクリアする必要があるでしょうclear: both;。mainこれにより、上のフローティング コンテンツの下に divがプッシュされます。

于 2013-08-11T00:39:51.787 に答える