使用jquery獲取ul基於頁面高度出現

好吧，所以我一直在搜索stackoverflow和谷歌。我找到了這個問題的答案，但由於某種奇怪的原因，我一直無法爲我工作。我也試圖在jquery中編寫我自己的代碼來實現這個功能。我已經檢查了我的代碼，將我的風格的附錄添加到了我的<ul>，它的工作原理基於點擊功能，但不能基於頁面高度工作。基本上我希望有一個選擇欄在向下滾動頁面後出現，並在我回去時消失。使用jquery獲取ul基於頁面高度出現

HTML

<ul class="bttn2" id="hide" style=""> 
    <li style="opacity:.5;" id="hide1" class="bttn2" href="#aboutme">ABOUT ME</li> 
    <li style="opacity:.5;" id="hide2" class="bttn2" href="#experience">EXPERIENCE</li> 
    <li style="opacity:.5;" id="hide3" class="bttn2" href="#hobbies">HOBBIES</li> 
    <li style="opacity:.5;" id="hide4" class="bttn2" href="#school">SCHOOL</li> 
</ul>

JQUERY

var element = $(".banner").offset().top; 
$(window).scroll(function(){ 
    var y = $(window).scrollTop(); 
if (y >= element){ 
    $('.bttn2').css('display', 'none'); 
    } 
});

基本功能：

https://jsfiddle.net/rnpp76rv

表示顯示無功能的工作原理：

https://jsfiddle.net/rnpp76rv/2/

來源

2016-02-26 nathan hartmann

簡單，

第1步頁面頂部的獲取地點：

var topLocation = $('html').offset().top;

步驟2中獲取滾動的當前位置：

var currLocation=$(window).scrollTop();

步驟3中比較位置和顯示/隱藏

if (topLocation != currLocation){ 
     $('#id1').show(); 
    } 
else{ 
     $('#id1').hide(); 
    }

Check fiddle here

來源

2016-02-26 09:31:36 dpanshu

使用jquery獲取ul基於頁面高度出現

回答

相關問題