web-dev-qa-db-ja.com

divにスクロールした後にdivを修正する方法は？

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

私が使用する場合：

.divname {
  position: fixed;
}

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

javascripthtmlcssscrollcss-position
51
Jakov Mikić

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

102
Kaloyan

これはCSS3で可能です。 here のように、position: stickyを使用してください。

position: -webkit-sticky; /* Safari & IE */
position: sticky;
top: 0;
11
Alexandre Aimbiré

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ライブラリを使用します...

<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>

チェック デモはこちら

4
acre
<script>
if($(window).width() >= 1200){
    (function($) {
        var element = $('.to_move_content'),
            originalY = element.offset().top;

        // Space between element and top of screen (when scrolling)
        var topMargin = 10;

        // Should probably be set in CSS; but here just for emphasis
        element.css('position', 'relative');

        $(window).on('scroll', function(event) {
            var scrollTop = $(window).scrollTop();

            element.stop(false, false).animate({
                top: scrollTop < originalY
                    ? 0
                    : scrollTop - originalY + topMargin
            }, 0);
        });
    })(jQuery);
}

これを試して ！ divにクラス.to_move_contentを追加するだけです

1
Shahid Amin

それは私のために働いた

$(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");
    }
});
1
Shuhad zaman