Question

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

我正在使用Curtain.js，目前我有一个固定的div，当哈希值发生变化时弹出。 I.E当用户向下滚动页面到不同的面板时，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");
   }
});

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

1 个答案: