偏移 javascript 滚动：无法读取未定义错误的属性“顶部”答案

【问题标题】：Offset javascript scroll: cannot read property 'top' of undefined error偏移 javascript 滚动：无法读取未定义错误的属性“顶部”
【发布时间】：2014-11-13 01:30:28
【问题描述】：

我正在尝试使用此 javascript 将侧边栏导航设置为偏移并随着滚动变得粘滞。错误是：

“无法读取未定义的属性'top'”

错误在var stickyNavTop = $('.toc').offset().top - 222;，它正在阻止其他js正常工作。

Example page using script

脚本：

// Sidebar Nav Sticky with Scroll
jQuery(document).ready(function() {  
    var stickyNavTop = $('.toc').offset().top - 222;
    var stickyEnd = $('.content').height() - 111; // stores height of .content element
    var praiseH = $('.praise').height(); //height of praise bar if present

    var stickyNav = function(){  
        var scrollTop = $(window).scrollTop();  

        if (scrollTop > stickyNavTop) {   
            $('.toc').addClass('sticky-nav'); 
            $('.content').css('float','right'); //needs float:right; applied due to .sticky-nav class being positioned
        } else {  
            $('.toc').removeClass('sticky-nav');
            $('.content').css('float','left');
        }

        if ($(window).scrollTop() >= (stickyEnd - praiseH) ) {
//          $('.toc').addClass('bottom'); removed for fadeIn/fadeOut
            $('.toc').fadeOut('slow');
        } else {
            $('.toc').fadeIn('slow');
        }

    };

    stickyNav();

    $(window).scroll(function() {  
        stickyNav();
    });

});

感谢任何有关如何解决此问题的帮助。谢谢！

【问题讨论】：

似乎 jQuery 无法访问对象 $('.toc') 的属性。你确定它存在于 DOM 中吗？
不，实际上它在某些页面上不存在，但是在每个页面上都会调用该脚本。猜猜我只需要针对特定页面启用它，或者如果它只存在，是否有调用它的方法？
您可以检查$('.toc') 是否存在，如果存在则运行stickyNav 函数。
谢谢，特里。我就是这样做的，它解决了这种情况。感谢帮助

标签： javascript jquery scroll undefined offset

【解决方案1】：

您可以使用console.log() 函数实际查看任何元素的本机属性。我不知道您是否仅限于 JQuery，但原生 JavaScript 解决方案每次都能解决问题；)

我发现了这个： https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollTop

可能会有帮助

【讨论】：

【解决方案2】：

添加一个 if 语句以查看我的 .toc 元素是否实际填充并存在，现在错误消失了，它可以在应有的页面上运行。

谢谢！

if ($('.toc').length > 0) { 
    var stickyNavTop = $('.toc').offset().top - 222;
    var stickyEnd = $('.content').height() - 111; // stores height of .content element
    var praiseH = $('.praise').height(); //height of praise bar if present

    var stickyNav = function(){  
        var scrollTop = $(window).scrollTop();  

        //output test heights
//      $("#test").html($(window).scrollTop());
 //   $("#height").html(stickyEnd);
  //  $("#praise").html(footerH);

        if (scrollTop > stickyNavTop) {   
            $('.toc').addClass('sticky-nav'); 
            $('.content').css('float','right'); //needs float:right; applied due to .sticky-nav class being positioned
        } else {  
            $('.toc').removeClass('sticky-nav');
            $('.content').css('float','left');
        }

        if ($(window).scrollTop() >= (stickyEnd - praiseH) ) {
//          $('.toc').addClass('bottom'); removed for fadeIn/fadeOut
            $('.toc').fadeOut('slow');
        } else {
            $('.toc').fadeIn('slow');
        }

    };

    stickyNav();

    $(window).scroll(function() {  
        stickyNav();
    });
}

【讨论】：