滚动到该div后如何使div固定？

Question

div滚动到那个后如何保持固定div？我有一个div稍后在页面中,你需要滚动才能达到目的div.

如果我使用:

.divname {
  position: fixed;
}

在div出现之前就应该正常显示.也许我需要的一个很好的例子是关于9gag的第二个广告.如果您的屏幕分辨率足够低,则在加载首页后您将看不到该广告,但在向下滚动后,您会看到第二个广告,并在向下滚动时保持固定状态.

Answer 1

我知道这只是标记为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/

Answer 2

CSS3可以做到这一点。只要使用position: sticky，因为看到这里。

position: -webkit-sticky; /* Safari & IE */
position: sticky;
top: 0;

Answer 3

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>

在此处检查演示

Answer 4

添加到 的@Alexandre Aimbir\xc3\xa9答案 - 有时您可能需要指定z-index:1在滚动时使元素始终位于顶部。\n像这样：

\n

position: -webkit-sticky; /* Safari & IE */\nposition: sticky;\ntop: 0;\nz-index: 1;\n

\n