1

div を別の要素と一緒に配置したいのですが、ページが垂直にスクロールされたときにその場所にとどまるようにします。親要素が画面の高さよりも長い。CSSだけでそれを行うことはできますか、それともjQueryを使用する必要がありますか(それは私が通常使用するものです)? 固定位置を使用しますが、親 div に対して相対的に関連付ける方法がわかりません...

<div id="veryHighDiv">
   <div id="positionMe"></div>
</div>

したがって、水平位置に関​​しては親に対する相対位置である必要がありますが、垂直スクロールに関しては「固定」されます。

4

3 に答える 3

2

最終的には固定位置にする必要があるため、動的に固定に変更すると、相対 (または通常は絶対) 配置内で行う CSS 作業が台無しになるため、相対として開始する必要はありません。

私だったら、固定要素がどこにあるべきかを計算する関数を書き、load や resize などのすべてのウィンドウ イベントでそれを呼び出して、固定要素が所定の位置にとどまるようにします。以下にサンプルを示しますが、残りの CSS に基づいて変更する必要がある場合があります。

<script>

$(window).load(function() {
    positionElem();
});
$(window).resize(function() {
    positionElem();
});

function positionElem() {
    var padFromDiv = 30; // amount of padding you want from your div
    var newX = 0; // initialize newX at 0

    // get difference in window and veryHighDiv if window is larger
    if ($(window).width() > $('#veryHighDiv').width()) {
        newX = ($(window).width()-$('#veryHighDiv').width());
    }

    newX+=padFromDiv;

    $('#positionMe').css('left',newX);
}

</script>
于 2012-06-19T19:43:50.513 に答える
1

jQuery で非常にシンプル - http://jsfiddle.net/zA3mq/

$(window).scroll(function() {
    $("#positionMe").css('position', 'fixed');
});
于 2012-06-19T19:50:53.967 に答える
1

絶対スタイルの div を相対 div にアタッチすると、相対 div がどこにあるかに固執すると思います。 

<div id="veryHighDiv">
       <div id="positionmMe"> </div>
    </div>

#veryHighDiv {
  position: relative;
}

#positionMe {
  position: absolute;
  top: 50px;
  left: 100px;
}
于 2012-06-19T19:46:19.233 に答える