16

ブラウザー ウィンドウではなく、親 div に対する要素の位置を修正することは可能ですか?

私が持っているとしましょう：

<div id="pagecontainer">

    <div id="linkspage">

        <div class="sidelinks">
            <a href="#page1" class="link">Link 1</a>
            <p>
            <a href="#page2" class="link">Link 2</a>
            <p>
            <a href="#page3" class="link">Link 3</a>
            <p>
            <a href="#page4" class="link">Link 4</a>
            <p>
        </div>

        <div class="linkscontent">
            content of links page
        </div>

    </div>

    //OTHER PAGES

</div>

基本的に 2 つのセクションを持つページです。左側のセクションはリンクのリストで、右側のセクションはページのコンテンツです。コンテンツをスクロール可能にしたいのですが、リンクは親の #pagecontainer に固定されたままであるため、#pagecontainer がスクロールしてもスクロールしませんが、ブラウザー ウィンドウ全体をスクロールすると移動します。

私はすでに JQuery "fixto" プラグインを試しました: https://github.com/bbarakaci/fixto。しかし、親要素 (#pagecontainer) のアルファが 0 の場合、ページがフェードイン/フェードアウトし、スクリプトがバグアウトするため、それを使用できません。親要素がなくなって修正する場所がないと見なされます。

ありがとう。

4

2 に答える 2

40

position: relative次のように、親を指定します。

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 0;
}

デモを参照してください。

于 2013-03-02T00:34:22.913 に答える
1

このCodePenを作成しました。

あなたの説明から、それは途中です。

ブラウザウィンドウ全体をスクロールすると移動します。

iframeまたは何らかの JavaScript ソリューションを使用する必要があります。

于 2013-03-02T01:38:46.677 に答える