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

Question

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

简讯

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/

Answer 1

简单，

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

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

第 2 步。获取滚动的当前位置：

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

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

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

在这里检查小提琴