77

divそこにスクロールした後、固定したままにする方法はdiv？ページの後半にがあり、divそこに到達するにはスクロールする必要がありますdiv。

私が使用する場合：

.divname {
  position: fixed;
}

通常表示されるdiv前に が表示されます。私が必要としているものの良い例は、9gagの 2 番目の広告です。画面の解像度が十分に低い場合、フロント ページを読み込んだ後にその広告は表示されませんが、下にスクロールすると 2 番目の広告が表示され、下にスクロールしている間固定されたままになります。

4

6 に答える 6

135

これは 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/

于 2013-04-06T11:31:14.897 に答える
6

jquery関数は最も重要です

<script>
$(function(){
    var stickyHeaderTop = $('#stickytypeheader').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop ) {
                    $('#stickytypeheader').css({position: 'fixed', top: '0px'});
                    $('#sticky').css('display', 'block');
            } else {
                    $('#stickytypeheader').css({position: 'static', top: '0px'});
                    $('#sticky').css('display', 'none');
            }
    });
});
</script>

次に、JQuery Lib を使用します...

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

HTMLを使用するようになりました

<div id="header">
    <p>This text is non sticky</p>
    <p>This text is non sticky</p>
    <p>This text is non sticky</p>
    <p>This text is non sticky</p>
 </div>

<div id="stickytypeheader">
 <table width="100%">
  <tr>
    <td><a href="http://growthpages.com/">Growth pages</a></td>

    <td><a href="http://google.com/">Google</a></td>

    <td><a href="http://yahoo.com/">Yahoo</a></td>

    <td><a href="http://www.bing.com/">Bing</a></td>

    <td><a href="#">Visitor</a></td>
  </tr>
 </table>
</div>

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>

ここでデモをチェック

于 2014-12-31T10:20:07.407 に答える
1

それは私のために働いた

$(document).scroll(function() {
    var y = $(document).scrollTop(), //get page y value 
        header = $("#myarea"); // your div id
    if(y >= 400)  {
        header.css({position: "fixed", "top" : "0", "left" : "0"});
    } else {
        header.css("position", "static");
    }
});
于 2016-08-08T09:33:40.440 に答える