html - 横に移動する div と定義

Question

position:fixed; という div メニューがあります。私のhtmlエディターでセットアップすると見栄えがよくなり、ブラウザーのサイズを最大化または最小化すると、ブラウザーを介してローカルでテストされ、その位置にとどまり、いくつかの時点で要素が覆われます。私はこの div で、ボディライン エリア内にとどまり、ヘッダー エリアやフッター エリアには決してアップしませんでした。したがって、基本的には、下にスクロールしてフッターが表示されたときに停止したいので、その上で停止する必要があります。また、ブラウザのサイズを変更するときに画面がジャンプしないようにする方法も知っておく必要があります。何か助けはありますか？

Answer 1

ユーザーの画面が特定のスクロール量である場合に特定の方法で動作させたい場合は、Javascript を使用する必要があります (フッターに当たったときに固定された位置を停止するなど)。

jQuery の場合:

$(window).scroll(function() {  // Called whenever a user scrolls on your page
    if ($(window).scrollTop() < 200) { // User is close enough to header, leave element absolute (or however you want it)
        $('#fixed-element-id').css('position', 'absolute');
        // Other logic
    } else if ($(window).scrollTop() > 800) { // user is close enough to footer, leave element absolute (or however you want it)
        $('#fixed-element-id').css('position', 'absolute');
        // Other logic
    } else { // User is somewhere that the element needs to follow their scrolling
        $('#fixed-element-id').css('position', 'fixed');
        // Other logic
    }
});