偏移 JavaScript 滚动:无法读取未定义错误的属性“top”

Offset javascript scroll: cannot read property 'top' of undefined error

本文关键字：错误 属性 top 未定义 读取 滚动 JavaScript 偏移      更新时间：2023-09-26

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

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

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

使用脚本的示例页面

脚本：

// 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();
    });
});
任何

关于如何钝的帮助是值得赞赏的。 谢谢！

您可以使用

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

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

可能会有所帮助

添加一个 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();
    });
}
相关文章：