0

我正在查看有关此 SO 问题的代码，并认为它在切换 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供参考。我的目标是在屏幕顶部有一个固定的导航栏，仅在特定 div（也包含导航链接）不在屏幕上时显示。

你可能会注意到我把'magicnav' div 卡在了页面的中间。这是故意的，因为我想防止它目前被固定在顶部，并且需要确保我可以快速查看我的 jQuery 是否正常工作。

4

2 回答 2

3

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

我在这个 JSFiddle中修复了它

于 2013-11-09T22:44:14.470 回答
1

基本故障排除

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

未捕获的类型错误：对象 [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我相信这是一个错字。这是固定功能：

函数 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 就绪事件中。此外，该函数isScrolledIntoView仅在原始 Fiddle 中准备好 DOM 时触发一次。每次检测到滚动事件时，您都必须触发它，因此我将您的条件语句包装在$(window).scroll()事件中。

我已经修好了你的小提琴——http: //jsfiddle.net/teddyrised/XN82s/10/

补充说明

在监听.scroll()事件时，当您开始移动滚动条时，某些浏览器会执行太多次。一个好的做法是限制它，例如使用这个漂亮的插件。

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

$(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();
        }
    }));
});
于 2013-11-09T22:44:33.747 回答