Question

我正在查看the code on this SO question并认为切换div的可见性非常有用，就像导航栏一样，依赖于屏幕上可见的页面上的其他元素。这是我在页面中使用的代码：

function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();

var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();

return ((docViewTop < elTop) && (docViewBottom > elBottom));
}

我尝试构建一个函数来执行此操作，但不幸的是我很喜欢编程。这是我使用的：

$('#magicnav').hide();
var intro = $('#intro');
$(document).ready(function () {
   if (intro.isScrolledIntoView()) {
    $('#magicnav').fadeOut();
   } else {
    $('#magicnav').fadeIn();
    }
  });

我也尝试了if(isScrolledIntoView($intro))语句，但显然这也是错误的。任何人都可以帮助我吗？

以下是jsfiddle of the page供参考。我的目标是在屏幕顶部有一个固定的导航栏，只显示特定div（也包含导航链接）不在屏幕上。

您可能会注意到我已将'magicnav'div卡在页面中间。这是有目的的，因为我想保持它不被固定到顶部，并且需要确保我能够快速查看我的jQuery是否正常工作。

Answer 1

$(document).ready()仅检查元素的状态一次。相反，请使用$(window).on('scroll');

我在this JSFiddle

修复了它

Answer 2

基本故障排除

对脚本进行故障排除的第一步：始终检查控制台是否有错误。通过在加载小提琴时检查控制台，我看到了这个错误：

未捕获TypeError：对象[object Object]没有方法'isScrolledIntoView'

这是因为没有名为.isScrolledIntoView的方法。它是一个简单的JS函数，您可以在其中提供元素的标识（类或ID），如果所述元素在视图中，它将返回该标识。它应该使用这样的东西：

// For class
if(isScrolledIntoView(".class")) {...} else {...}

// For ID
if(isScrolledIntoView("#id")) {...} else {...}

这是因为函数根据以下行评估元素：

var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();

此外，elTop和elBottom实际上未定义。我相信这是一个错字。这是固定功能：

function isScrolledIntoView（elem）{ var docViewTop = $（window）.scrollTop（）; var docViewBottom = docViewTop + $（window）.height（）;

var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();

return ((docViewTop < elemTop) && (docViewBottom > elemBottom));

}

你的小提琴

在操作DOM时，总是在DOM准备就绪时执行它们，即：

$(document).ready(function () {
    $('#magicnav').hide();
    $(window).scroll(function() {
        if (isScrolledIntoView('#intro')) {
            $('#magicnav').fadeOut();
        } else {
            $('#magicnav').fadeIn();
        }
    });
});

请注意，我已将.hide()方法移动到DOM ready事件中。此外，函数isScrolledIntoView仅在原始小提琴中准备好DOM时触发一次。每次检测到滚动事件时都必须触发它，因此我将条件语句包装在$(window).scroll()事件中。

我修复了你的小提琴 - http://jsfiddle.net/teddyrised/XN82s/10/

附加说明

在收听.scroll()事件时，当您开始移动滚动条时，某些浏览器会执行此操作太多次。一个好的做法就是限制它，例如使用this nifty plugin。

您的代码只需要很少的修改：

$(document).ready(function () {
    $('#magicnav').hide();

    // Here we throttle the scroll event to firing once every 250ms
    $(window).scroll($.throttle(250, function() {
        if (isScrolledIntoView('#intro')) {
            $('#magicnav').fadeOut();
        } else {
            $('#magicnav').fadeIn();
        }
    }));
});

当第二个div滚动开/关页面时切换div显示

2 个答案:

基本故障排除

你的小提琴

附加说明