当滚动条击中另一个div的底部时淡出div

这个问题与这个问题有关： 当URL hash＃changes时，将div添加到body

我正在使用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"); } });