1. ホーム
  2. javascript

スクロールしてきたdivを固定にするには?

2023-10-29 21:01:51

質問

どのようにすれば div にスクロールした後、固定されたまま div ? 私は div がページの後半にあり、スクロールしないとその div .

を使ったら。

.divname {
  position: fixed;
}

div は、通常表示される前に表示されます。私が必要とするものの良い例は、2番目の広告が 9ギャグ . あなたの画面の解像度が十分に低い場合は、フロントページをロードした後、その広告は表示されませんが、スクロールダウンした後、あなたは第二の広告が表示され、それはあなたがスクロールダウンしている間、固定されたままになります。

どのように解決するのですか?

CSSのみで可能になりました。 https://stackoverflow.com/a/53832799/1482443


jQueryのアプローチを必要とする人のために、以下は8年前に投稿されたオリジナルの回答です。

私はこれがhtml/cssのみタグ付けされていることを知っているが、あなたはcssだけでそれを行うことはできません。最も簡単な方法は、いくつかのjQueryを使用することです。

var fixmeTop = $('.fixme').offset().top;       // get initial position of the element

$(window).scroll(function() {                  // assign scroll event listener

    var currentScroll = $(window).scrollTop(); // get current position

    if (currentScroll >= fixmeTop) {           // apply position: fixed if you
        $('.fixme').css({                      // scroll to that element or below it
            position: 'fixed',
            top: '0',
            left: '0'
        });
    } else {                                   // apply position: static
        $('.fixme').css({                      // if you scroll above it
            position: 'static'
        });
    }

});

http://jsfiddle.net/5n5MA/2/