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

Posted 2023-02-22

【中文标题】滚动到该 div 后如何使 div 固定？

【英文标题】：How to make div fixed after you scroll to that div?

【发布时间】：2013-03-28 19:59:50

【问题描述】：

滚动到div 后如何使div 保持固定？我有一个div，它位于页面后面，您需要滚动才能找到div。

如果我使用：

.divname 
  position: fixed;

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

【参考方案1】：

现在只能使用 CSS，请参阅 https://***.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/

【讨论】：

通常需要用 $(window).load(function () ... );所以加载css文件后fixmeTop会有正确的值

【参考方案2】：

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

查看DEMO HERE

【参考方案3】：

它对我有用

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

【讨论】：

这是我需要的。

【参考方案4】：

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

试试这个！只需将类 .to_move_content 添加到您的 div

【讨论】：

像魅力一样工作！如果有人在 CSS 中需要 z-index: 9999 将把 元素放在其他内容的前面

【参考方案5】：

这在 CSS3 中是可能的。只需使用position: sticky，如here 所示。

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

【讨论】：

这显然应该改成最佳答案。

这不是最佳答案！这就是答案......其他只是解决方法。 :D

我希望有一种方法可以在保持绝对位置的同时保持粘性？

【参考方案6】：

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

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