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);
});
});

これにより、Uncaught TypeError: Cannot read property 'top' of 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);
});
});

$sidebar.addClass("fixed"); の下にUncaught SyntaxError : Unexpected Identifierが表示されるようになりました。ライン。

これは $sidebar が宣言されているということですか? しかし、それは!? 右？

助けてください、これは私を狂わせています！

編集2：

そのため、コードを再度更新すると、window var が定義されていないというエラーが発生したため、グローバルになりました。

$(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 に答える