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

我对这个问题有了更好的理解，为什么我让它在小提琴中工作但不是here。当在主页上时，如果我向下滚动，在x高度之后它就会固定。一旦.projectLoaded出现在正文上，就会出现一个固定的div #project，在固定的div中我试图这样做，当你滚动到.fixme它也会变得固定，但它没有t检测到你在滚动中的正确位置，以便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执行此操作

hdfs

jsFiddle

Answer 2

jQuery：

$(document).ready(() => {                           //makes sure document is loaded

        var fixmeTop = $('.yourdiv').offset().top; //gets the initial position of element
          $(window).scroll(function() {           //scroll event listener
            var currentScroll = $(window).scrollTop(); //applies position, and makes it fixed when you scroll to it or below ↓
            if (currentScroll >= fixmeTop) {          
              $('.yourdiv').css({
                position: 'fixed',
                top: '0',
                left: '0'
            });
            } else {
              $('.yourdiv').css({  //sets position to static if you scroll above it ↑
                position: 'static'
            });
          }
        });
      });

当我滚动时，固定div没有检测到我在页面的位置

2 个答案: