固定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無法檢測到我在頁面上滾動時的位置

回答

相關問題