滚动侧边栏引发Javascript错误“无法调用null的方法'offset'

基本上，我是在一个侧边栏上工作，只有当浏览器窗口到达它时才会滚动

更新2：

这是我目前正在使用的代码：

$(function() {
var $sidebar   = $("#sidebar"),
    $window    = $(window),
    offset     = $sidebar.offset(),
    topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.addClass('fixed');
        } else {
            $sidebar.removeClass('fixed');
        }
    });
});

---

我不再收到错误，但是滑动不起作用。这里的小提琴显示了所需的效果，我的CSS完全相同：

您需要将选择器放在一个准备好文档的包装器中。 实际上，当您尝试运行选择器时，侧边栏不可用

$(document).ready(function(){


    var $sidebar   = $("#sidebar"),
    $window    = $(window),
    offset     = $sidebar.offset(),
    topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.addClass('fixed');
        } else {
            $sidebar.removeClass('fixed');
        }
    });
});

---

您需要将选择器放入一个doc-ready包装器中。 实际上，当您尝试运行选择器时，侧边栏不可用

$(document).ready(function(){


    var $sidebar   = $("#sidebar"),
    $window    = $(window),
    offset     = $sidebar.offset(),
    topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.addClass('fixed');
        } else {
            $sidebar.removeClass('fixed');
        }
    });
});

---

如果此代码在您的小提琴中起作用，您可能需要检查两件事：

用ready函数包装代码 可能是您的代码在元素存在/呈现之前运行。在这种情况下，请使用函数包装代码

检查是否正在加载jQuery库文件。 如果没有加载jQuery库文件，请将其添加到页面的标记中

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

---

如果此代码在您的小提琴中起作用，您可能需要检查两件事：

用ready函数包装代码 可能是您的代码在元素存在/呈现之前运行。在这种情况下，请使用函数包装代码

检查是否正在加载jQuery库文件。 如果没有加载jQuery库文件，请将其添加到页面的标记中

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

---

---

您是否加载了jQuery的.js文件？在js FIDLE中，它默认将您的代码包装在dom中就绪，您是否尝试将代码包装在文档中就绪？@Sergio是的，我已经运行了一个console.log进行测试，并设置了var$sidebar。控制台向console.log$sidebar显示了什么；@Sergio它返回为null您是否加载了jQuery的.js文件？在js FIDLE中默认情况下，将代码包装到dom ready中，您是否尝试将代码包装到文档ready中？@Sergio是的，我已经运行了一个console.log进行测试，并设置了var$sidebar。控制台向console.log$sidebar显示了什么；@Sergio返回为null尝试了这一操作，并意识到我遇到了另一个错误，对象没有“ready”方法。尝试了这一步，还是真的如果我遇到另一个错误，则对象没有“就绪”方法。我执行了这两个建议，但仍然不起作用，但现在没有错误。您是否有实时链接？如果console.log$sidebar；loggs为NULL，则不会加载jQuery，否则您仍然会有一个jQuery对象，而不是NULL。另外，您还可以从关于其他错误没有“ready”方法。您使用的是哪个版本的jQuery？不幸的是，这个网站不是实时的，但我可能很快就能得到一个示例。当我使用console.log$sidebar；现在，它在控制台中没有显示任何内容。我使用的正是您上面为jQuery键入的内容。@user2766423，除了jQuery之外，您还有其他框架吗？它是wordpress吗站点？在做了一些挖掘之后，它看起来像是prototype.js安装在同一个页面上，无论出于什么原因，它都导致div无法滑动。当prototype.js未包含时，一切都正常。我做了这两个建议，但它仍然不工作，但是现在没有错误。你有一个实时链接吗？If console.log$sidebar；loggs asNULL则jQuery未加载，否则您将拥有一个jQuery对象，而不是NULL。此外，从您关于另一个错误的其他评论中，也没有“ready”方法。您使用的是哪个版本的jQuery？不幸的是，此网站不是实时的，但我可能很快就能得到一个示例。当我控制台.log$sidebar；现在，它在conso中没有显示任何内容le.我使用的正是您在上面键入的jquery。@user2766423，除了jquery之外，您还有其他框架吗？它是wordpress网站吗？经过一些挖掘，它看起来像是prototype.js安装在同一页面上，无论出于什么原因，它都导致div无法滑动。当prototype.js不包含时，一切都正常。