0

所以我现在有这个代码：

$(document).ready(function(){
$window = $(window),
$sidebar = $(".sidebar"),
sidebarTop = $sidebar.position().top,
sidebarHeight = $sidebar.height(),
$footer = $(".footer"),
footerTop = $footer.position().top,    
$sidebar.addClass('fixed');

$window.scroll(function(event) {
    scrollTop = $window.scrollTop(),
    topPosition = Math.max(0, sidebarTop - scrollTop),
    topPosition = Math.min(topPosition, (footerTop - scrollTop) - sidebarHeight);
    $sidebar.css('top', topPosition);
});
});

这产生了一个未捕获的类型错误：无法读取 null 的属性“顶部”

我还是 jQuery 的新手，但我猜这是因为 .sidebar 还没有出现在页面上，它是通过 AJAX 注入的外部 html 文件中的 div。

我在想我需要更改 $(document).ready(function(){ 行，以便当 .sidebar 实际上在页面上时它会抓取变量，但我真的不知道该怎么做。我已经一直在玩 .on() 方法，但还没有运气。

任何帮助将非常感激！

谢谢！

编辑：

所以有了这个更新的代码：

$(document).ready(function(){

    $(window).scroll(function(event) {
        var $sidebar = $('.sidebar'),
            sidebarTop = $sidebar.position().top,
            sidebarHeight = $sidebar.height(),
            $footer = $('#footer'),
            footerTop = $footer.position().top,    
            $sidebar.addClass("fixed");

        scrollTop = $(window).scrollTop(),
        topPosition = Math.max(0, sidebarTop - scrollTop),
        topPosition = Math.min(topPosition, (footerTop - scrollTop) - sidebarHeight);
        $sidebar.css('top', topPosition);
});
});

我现在得到一个Uncaught SyntaxError: Unexpected Identifier under the $sidebar.addClass("fixed"); 线。

这意味着 $sidebar 被声明了吗？但它是！？正确的？

任何帮助家伙，这让我发疯！

编辑2：

因此再次更新代码，由于未定义窗口变量而出现错误，因此使其成为全局变量：

$(document).ready(function(){
$window = $(window);

$window.scroll(function(event) {
    var $sidebar = $(".sidebar"),
        sidebarTop = $sidebar.position().top,
        sidebarHeight = $sidebar.height(),
        $footer = $("#footer"),
        footerTop = $footer.position().top;    

    $sidebar.addClass('fixed');
    scrollTop = $window.scrollTop(),
    topPosition = Math.max(0, sidebarTop - scrollTop),
    topPosition = Math.min(topPosition, (footerTop - scrollTop) - sidebarHeight);
    $sidebar.css('top', topPosition);
});

});

但是现在 .sidebar 有一个常量style="top: -370px;附加到它上面。

任何人？哈哈……啊！

4

1 回答 1

1

首先，您应该使用var关键字声明变量，否则它们将被添加到全局范围中。

其次，如果您将$sidebar选择器和所有其他变量放在滚动函数中，那么它将在滚动时进行选择，而不是仅在文档加载时进行一次选择。因此，如果侧边栏在用户滚动时可用，那么一切都应该正常运行。

本质上，它应该如下所示：

$(document).ready(function(){

    $window.scroll(function(event) {
        var $window = $(window),
            $sidebar = $(".sidebar"),
            sidebarTop = $sidebar.position().top,
            sidebarHeight = $sidebar.height(),
            $footer = $(".footer"),
            footerTop = $footer.position().top;    

        $sidebar.addClass('fixed');
        scrollTop = $window.scrollTop(),
        topPosition = Math.max(0, sidebarTop - scrollTop),
        topPosition = Math.min(topPosition, (footerTop - scrollTop) - sidebarHeight);
        $sidebar.css('top', topPosition);
    });

});
于 2012-07-15T02:19:07.533 回答