固定div无法检测到我在页面上滚动时的位置

我已查看此article，并按照最上面的答案，但无法为我工作。固定div无法检测到我在页面上滚动时的位置

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在身上固定格#project是存在的，在固定格我试图让它滚动到.fixme它也变得固定，但它没有检测到你是在正确的点在滚动div以固定。

有点像$（窗口“＃项目的容器”）。滚动（函数（）现实吗？

此外，这是不大不小的侧问题的，但如果它变成固定的，我怎么能遏制它在一个相对的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跟着你向下滚动的用户。

来源

2016-05-15 Darren Bachan

'位置：固定;顶部：100％;'意味着你是在告诉div来留视口的矩形下方在任何时候。 – Jhecht

当项目被点击时，会添加一个类，因此顶部为0.它是可见的并且位于下面的页面上方，但这是问题。因此，我无法让窗口识别.fixme div的位置。 –

与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

来源

2016-05-15 06:14:34 keziah

固定div无法检测到我在页面上滚动时的位置

回答

相关问题