javascript - 滚动侧边栏引发 Javascript 错误“无法调用 null 的方法‘偏移量’

Question

本质上，我正在研究一个只有在浏览器窗口到达它时才会滚动的侧边栏。

更新 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 完全一样：http: //jsfiddle.net/dKDJz/647/

Answer 1

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

• 将您的代码包装在就绪函数中

可能是您的代码在元素存在/呈现之前正在运行。在这种情况下，用准备好的函数包装你的代码

$(function() {
  // your code
});

• 检查您是否正在加载 jQuery 库文件。

如果您没有加载 jQuery 库文件，请将其添加到页面的标签内。

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

Answer 2

您需要将您的选择器放在一个文档就绪的包装器中。当您尝试运行选择器时，基本上 #sidebar 不可用。

$(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');
        }
    });
});

Answer 3

var topPadding = 15;

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