javascript - 当滚动条碰到另一个 div 的底部时淡出一个 div

Question

这个问题有点与这个有关：Append div to body when URL hash # changes

我正在使用 Curtain.js，目前我有一个固定的 div，当哈希更改时会弹出。IE 当用户向下滚动页面到不同的面板时，div 淡入。我不希望这个 div 在第一个面板上可见。

我现在遇到的问题是，当访问者将页面向上滚动到顶部时，固定的 div 仍然可见。即出现在第一个面板的顶部。我想在它到达第一个面板的底部时立即淡出该 div。另一个问题是面板的高度调整到浏览器窗口的高度（流体/响应式布局）排除了任何固定像素 JS 解决方案，这是我的代码所基于的：

    // fade in/fade out banner titles
$(window).trigger('scroll');

var divs = $('.nav-wrap'); 
$(window).scroll(function(){
   if($(window).scrollTop() < 550){
         divs.fadeOut("slow");
   } else {
         divs.fadeIn("slow");
   }
});

有人有什么建议吗？？

Answer 1

您可以使用window.height()它返回浏览器视口的高度：

var vp = $(window).height(); // height of the browser's viewport
var divs = $('.nav-wrap'); 
$(window).scroll(function(){
   if($(window).scrollTop() < vp){
         divs.fadeOut("slow");
   } else {
         divs.fadeIn("slow");
   }
});