javascript - 修复了当我滚动时 div 没有检测到我在页面上的位置的问题

Question

我看过这个article并遵循了最佳答案，但我无法让它为我工作。

HTML

<div id="project">
   <div class="details">
      <p>Lorem Ipsum>
   </div>
   <div class="process">
      <div class="col-6 fixme">Content</div>
      <div class="col-6">Content</div>
   </div>
</div>

CSS

#project {
    position:fixed;
    left:0;
    width:100%;
    height:100%;
    top:100%;
}
body.projectLoaded #project {
    opacity:1;
    top:0;
}

Javascript

var fixmeTop = $('.fixme').offset().top;
    $(window).scroll(function() {
        var currentScroll = $(window).scrollTop();
        if (currentScroll >= fixmeTop) {
            $('.fixme').css({
                position: 'fixed',
                top: '0',
                left: '0'
            });
        } else {
            $('.fixme').css({
                position: 'static'
            });
        }
    });

我对这个问题有了更好的理解，也明白了为什么我让它在 fiddle 中工作而不是 here .在主页上时，如果我向下滚动，在 x 高度之后它会固定。一旦 .projectLoaded 出现在 body 上，就会出现一个固定的 div #project ，在固定的 div 中，我试图做到这一点，所以当你滚动到 .fixme 它也变成了固定的，但它没有检测到你在滚动中正确的点让 div 变成固定的。

$(window, "#project-container").scroll(function() 这样的东西现实吗？

此外，这是一个附带问题，但如果它已固定，我如何将它包含在相对的 div 中？会是这个样子吗？

HTML

<div class="container">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>

CSS

.container { position:relative; width:1280px; }
.parent { position:absolute; }
.child { position:fixed; width:960px; }

这是最好的方法吗？我想要实现的是当你看到这个 page ，我希望 .fixme div 在您向下滚动时跟随用户。

Answer 1

用 jQuery 做这个

function fixDiv() {
    var $div = $(".fixme");
    if ($(window).scrollTop() > $div.data("top")) { 
        $div.css({'position': 'fixed', 'top': '0', 'width': '100%'}); 
    }
    else {
        $div.css({'position': 'static', 'top': 'auto', 'width': '100%'});
    }
}

$('.fixme').data("top", $('.fixme').offset().top); // set original position on load
$(window).scroll(fixDiv);

jsFiddle