滾動功能沒有在我想要的位置觸發

我有一個窗口滾動功能，我試圖撥入。最初，我試圖用航點，但無法弄清楚。滾動功能沒有在我想要的位置觸發

我的問題是我的功能是射擊太早，而不是在我想要它的位置。它在屏幕底部到達主容器時觸發，全部位於#home-info。我遇到的問題是，如果有人滾動緩慢，他們永遠不會看到動畫。理想情況下，我希望函數在到達#info-container時觸發，容器中帶有動畫對象。

我在做什麼錯誤，不允許這種情況發生，或者有沒有更好的方法來做到這一點？

Fiddle. See it here

function boxes() { 
window.addEventListener("scroll", function(event) { 

    var top, green, yellow, red; 

    top = this.scrollY; 

    green = document.querySelector("#green"), 
    yellow = document.querySelector("#yellow"), 
    red  = document.querySelector("#red"); 

    if(top > 100){ 
     green.classList.add("green", "active"); 
     yellow.classList.add("yellow", "active"); 
     red.classList.add("red", "active"); 
    } 
}, false); 
} 
setTimeout(boxes,1200); 


<div id="home-info"> 
     <div id="home-info-container"> 
      <div id="home-info-container"> 
       <div id="home-info-container-description"> 
        <div id="home-info-container-title">THE <span class="yellow-color sansbold">LEADING</span> PROVIDER FOR<br> DEMOLITION & WRECKING</div> 
        <div id="home-info-description">The Eslich Wrecking Company has been recognized as a leader in the demolition field for over 60 years. Over that time span, we have gained both the experience and reputation for doing quality work in an expedient, safe and cost efficient manner. Our track record proves that Eslich Wrecking has the people, equipment and know-how to tackle even the most complex situations and the most demanding jobs. This includes the capability to bond any project when necessary and to carry general liability, auto, and pollution insurance up to 10 million.</div> 
       </div> 
      </div> 
<section id="info"> 
    <article id="info-container"> 
    <a href="projects"> 
     <div id="green" class="box"> 
     <div class="info-box-title">PROJECT AFTER PROJECT</div> 
     <div class="info-box-description">Over 60 years of accumulated projects.</div> 
     </div> 
    </a> 
    <a href="about"> 
     <div id="yellow" class="box"> 
     <div class="info-box-title">YEARS OF DEMOLITION HISTORY</div> 
     <div class="info-box-description">Find out about - The Eslich Wrecking Company.</div> 
     </div> 
    </a> 
    <a href="contact"> 
     <div id="red" class="box"> 
     <div class="info-box-title">GET IN TOUCH WITH US</div> 
     <div class="info-box-description">Contact us for more information.</div> 
     </div> 
    </a> 
    </article> 
</section> 
</div>

來源

2016-06-07 Becky

每當'top> 100'時開始動畫。你的'＃info-container'就是這樣。爲什麼100？和'setTimeout'有什麼關係？ –

@DavidHedlund我試過使用不同的值比100，但實際上我希望它被設置爲容器，而不是一個像素。我添加了'setTimeout'來延遲函數，有點像一個bandaid，直到我修復這個問題。 – Becky

你不想硬編碼的滾動條位置。對象變爲可見的位置取決於視圖端口的高度，但更重要的是取決於目標元素上方有多少內容。

定義一個變量目標的東西，如下列：

var target = $('#info-container').offset().top; 
if(top >= target) { 
    // start animation 
}

還要注意的是滾動頂部不能告訴你是什麼在你的視口，如果你不也看高度你的窗戶的。在上述條件下，使用類似

var top = this.scrollY + $(window).height();

這會給你一個評估爲真的只要#info-container滾動到視圖的條件。根據您的需要，您可能希望您的target也包含$('#info-container').height()，如果您希望滾動一旦啓動整個#info-container在視圖中。

來源

2016-06-07 15:30:46

謝謝！我似乎無法讓'.height（）'工作。我做了和你一樣的'var target = $（'＃info-container'）。height（）;'。當容器在視圖中時，它會正確加載，就像另一個一樣。 – Becky

@Becky：是的，'offset（）。top'是元素開始的地方，相對於文檔，'height（）'是它的高度。如果你想確保*整個*元素滾動到視圖中，你希望你的閾值是頂部加高度，而不僅僅是高度。 –

我不知道我現在做錯了什麼。 var'target = $（'＃info-container'）。offset（）。top.height（）;' – Becky

滾動功能沒有在我想要的位置觸發

回答

相關問題