只有在給定滾動位置時纔會淡入&&如果顯示爲「無」

Question

我正在建立一個單頁滾動網站，其中一個菜單在點擊時滾動到內容部分，然後在相關區域淡入淡出。

這很好。

最重要的是，如果用戶只是在沒有點擊事件的情況下進行滾動，那麼我正在淡入部分。

所有要淡入的分區都顯示爲「無」。

兩種以上的方法對自己的工作，但也有在事件交叉海誓山盟的問題，即：

如果我的淡入代碼添加到滾動功能，會發生以下情況：

在很開始時，您必須滾動一點以淡入內容，因爲如果我不這樣做，即使在菜單項上的點擊也不會觸發。

如果我點擊菜單項「關於我們」，例如它滾動到頁面的目標部分並淡入內容，這很好，但在此之後，on滾動功能再次觸發並淡入淡出同樣的內容再次。

總之，如果顯示設置爲隱藏並且滾動位置正確，我試圖使內容淡入。

當然，當目標部分仍然設置爲顯示'none'時，該部分應該從默認位置滾動並淡入。

我嘗試過使用visibilty的條件語句：hidden和其他許多東西，但我無法得到它的工作。

<div id="menu"> 
<ul> 
<li><a class="button" href="#home">Home</a></li> 
<li><a class="button" href="#about">About</a></li> 
<li><a class="button" href="#service">Services</a></li> 
<li><a class="button" href="faqs.html">Galleries</a</li> 
<li><a class="button" href="#contact">Contact</a></li> 
</ul> 
</div> 

$(window).scroll(function() { 
if ($(this).scrollTop()> 100) { 
$('.about').fadeIn(2000); 
} else { 
$('.about').fadeOut(); 
} 
}); 

$(".button").on("click", function(e) { 
$('.rightcservices').fadeIn(2000); 
e.preventDefault(); 

$("body, html").animate({ 
    scrollTop: $($(this).attr('href')).offset().top 
}, 600); 
}); 
}); 

目標是讓鏈接淡入滾動或點擊，默認設置的部分設置爲無顯示。

Answer 1

在所有的評論讓我張貼最後的代碼並做了一些澄清。有點過分了（有時候會發生有趣的功能），但最初的想法不能太複雜。但我低估了這一點，並最終通過添加變量pilot並將其用作切換和阻止onscroll偵聽器函數以在手動滾動時執行淡入淡出的手動捲動與動畫分離。同時將第二個衰落實例放在動畫的回調中，並將切換返回。

http://codepen.io/anon/pen/zvrvNP?editors=001

$(function() { 

    var anchors = ['home','about','services','contact'], 
    target, zenith, nadir, location, pilot, 
    modern = window.requestAnimationFrame; 

    storeDimensions(); 

    $(window).resize(storeDimensions).scroll(function() { 

     location = $(this).scrollTop(); 

     if (!pilot) { 
     if (modern) requestAnimationFrame(checkFade); 
     else checkFade(); 
     } 
    }); 

    $('.button').click(function(e) { 

     e.preventDefault(); 

     pilot = true; 

     var destination = $(this.hash).offset().top, 
     goal = $('.' + this.hash.substr(1)); 

     if (destination != location) goal.hide(); 

     $('html, body').animate({scrollTop: destination}, 600, function() { 

      goal.fadeIn(2000); 
      pilot = false; 
     }); 
    }); 

function storeDimensions() { 

    var placement = []; target = []; zenith = []; nadir = []; 

    $.each(anchors, function(n) { 

     placement.push($('#' + this).offset().top); 
     target.push($('.' + this)); 
     zenith.push(placement[n]-$(window).height()*0.8); 
     nadir.push(placement[n]+target[n].outerHeight(true)); 
    }); 
} 

function checkFade() { 

    $.each(anchors, function(i) { 

     if (!target[i].is(':animated')) { 
     if (location > zenith[i] && location < nadir[i]) target[i].fadeIn(2000); 
     else if (target[i].is(':visible')) target[i].hide(); 
     } 
    }); 
} 
}); 

我一直在使用​​代替hide()何時會看看是否可以固定注意到一個怪癖。腳本應該發揮作用以及是但未來任何可能的更新可以在這個演示中找到：

http://codepen.io/Shikkediel/pen/avdyWx?editors=001

---

下面是意識到預計算和存儲所有的尺寸和偏移量是之前的早期版本和註釋實際上比獲取每個滾動更新的值更有效率。我將離開文本有作爲，因爲它可能使基本思路更加清晰：

http://codepen.io/anon/pen/qOOeod?editors=001

數組elements確實包含了錨的名字，我們將開始通過他們在這裏滾動循環：$.each(elements, function() {。這樣就不需要分別爲它們編寫條件語句。

對於循環內的變量object和target，this將依次爲數組中的每個錨點名稱。所以它們最終會成爲代表要滾動的元素的jQuery選擇器，例如$('#about')，以及具有應該淡入的匹配類的元素 - $('.about')。

變量zenith和nadir是頁面的最高和最低滾動位置，其間將顯示每個錨定部分。當使用object.offset().top時，元素在頂部時會開始淡入。減去窗口高度，當它到達屏幕的底部時它將開始淡入淡出（看起來更好的細節）。要使用的最低滾動位置（nadir，自評論以來有一點改變）表示錨本身的位置加上衰落內容的高度，包括填充和邊距。因此，如果可見主體通過向上滾動屏幕（大約在現場示例中），則會再次隱藏。

我也添加了滾動功能的優化。特別是在啓用了smoothscroll的Firefox中，它可以激發很多，因此只要使用​​對屏幕進行重新繪製時，只需重新計算CPU就可以獲得更輕鬆的時間。當功能不可用時，可以回退到「正常」行爲。當單擊一個按鈕並開始滾動動畫時，jQuery將每秒觸發約一百次，因此這對任何設備都是一件好事。