Javascript 滚动到该div后，如何修复该div？

如何使

div

在滚动到该

div

后保持固定？我有一个

div

在后面的页面中，您需要滚动到该

div

如果我使用：

.divname {
  position: fixed;
}

---

div

将在正常显示之前显示。也许我需要的一个很好的例子就是第二个广告。如果您的屏幕分辨率足够低，则在加载首页后您将看不到该广告，但在向下滚动后，您将看到第二个广告，并且在向下滚动时它将保持不变。

我知道这仅标记为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'
        });
    }

});

---

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>

$（函数（）{
var stickyHeaderTop=$（“#stickytypeheader”）.offset（）.top；
$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>stickyHeaderTop）{
$（'#stickytypeheader'）.css（{position:'fixed'，top:'0px'}）；
$（'#sticky'）.css（'display'，'block'）；
}否则{
$（'#stickytypeheader'）.css（{position:'static'，top:'0px'}）；
$（'#sticky'）.css（'display'，'none'）；
}
});
});

然后使用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>

此文本是非粘性的

此文本是非粘性的

此文本是非粘性的

此文本是非粘性的

Lorem ipsum dolor sit amet，奉献精英，
劳工和大型企业的临时投资
阿利夸。我们需要一个最低限度的练习
ullamco laboris nisi和aliquip ex ea commodo consequat。酒后驾车
在沃鲁帕特·维利特·埃塞的《reprehenderit》中的奥特·伊鲁尔·多洛（aute irure dolor）
纤毛多洛雷欧盟福吉亚无巴黎。圣奥凯卡除外
丘比特人不轻率，必须承担责任
莫利特动物是产下的

检查它对我有用

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

如果（$（窗口）.width（）>=1200）{
（函数（$）{
var元素=$（'.to_move_content'），
originalY=element.offset（）.top；
//元素和屏幕顶部之间的空间（滚动时）
var topMargin=10；
//可能应该在CSS中设置；但这里只是为了强调
css（'position'，'relative'）；
$（窗口）.on（'scroll'，函数（事件）{
var scrollTop=$（窗口）.scrollTop（）；
元素。停止（false，false）。设置动画({
顶部：滚动顶部<原始
? 0
：滚动顶部-原始+顶部边距
}, 0);
});
})（jQuery）；
}

---

试试这个！只需添加类即可。要将内容移动到div中，CSS3可以实现这一点。只需使用

位置：sticky

，如图所示

---

添加到

@Alexandre Aimbiré

的答案中-有时您可能需要指定

z-index:1

，以使元素在滚动时始终位于顶部。 像这样：

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

---

通常需要用$（window.load（function（）{…}）包装此代码；所以fixmeTop在加载css文件后会有正确的值，就像charm一样！如果任何人需要CSS中的

z-index:9999

将元素置于其他内容之前，这就是我所需要的。这显然应该更改为最佳答案。

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

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