jquery - 使用 jquery 根据页面高度显示 ul

Question

好的，所以我一直在搜索 stackoverflow 和谷歌。我已经找到了这个问题的答案，但由于某些奇怪的原因，我无法找到一个为我工作的答案。我还尝试在 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

显示 display none 功能有效:

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

Answer 1

简单，

第 1 步。获取页面顶部的位置:

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

第 2 步. 获取滚动条的当前位置:

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

步骤 3. 比较位置和显示/隐藏

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

Check fiddle here