Question

我有这个'magicbar'导航，我希望保持隐藏，直到用户滚过介绍div（div离开屏幕）。我从this SO question here获取了JQuery，并将'＆gt; ='替换为'=='，例如this SO question here.

我实际上只是试图告诉浏览器设置一个我已到达div结尾的警报，但这也不起作用。我也尝试将隐藏的div移动到页面的中间，以防事件发生并且它在屏幕上“显示”。 jQuery被加载到页面上，并且它成功地隐藏了div，因此脚本的第一部分正在工作。这是没有功能的肉n土豆。作为一个jQuery noob，我不明白为什么这不起作用。

这是我的代码：

<script>
$("#magicnav").hide();
jQuery(function ($) {
    $('#intro').bind('scroll', function () {
       if ($(this).scrollTop() + $(this).innerHeight() == $(this).scrollHeight){
           $("#magicnav").show();
       }
    });
});   
</script>

**更新以下是此问题的jsfiddle。

Answer 1

获取scrollHeight的正确方法如下：

$(this)[0].scrollHeight

或

$(this).prop('scrollHeight')

Answer 2

我明白了。这个问题与我的div不足以在一开始就“可滚动”的事实有关，我不得不以不同的方式解决问题。感谢This SO question here的帮助，我彻底抛弃了早期的代码，而不是专注于“底部的div”，我专注于到达页面上的某个点。

$('#magicnav').hide();
   var target = $(".yellowbg").offset().top;
   var interval = setInterval(function() {
   if ($(window).scrollTop() >= target) {
      $('#magicnav').show();
      clearInterval(interval);
     }
  }, 250);

其中'yellowbg'是我之前定位的div之后页面上下一部分的类。

第二个div滚动页面时无法显示div

2 个答案: