0

私はワードプレスのウェブサイトを持っており、投稿ページにjqueryの固定サイドバーがあります。固定サイドバーは投稿セクションから始まり、コメントセクションで終わります。

私はこのjqueryを使用しています

$window = $(window),
    $sidebar = $("#side-scroller"),
    sidebarTop = $sidebar.position().top,
    sidebarHeight = $sidebar.height(),
    $footer = $("#comments"),
    footerTop = $footer.position().top,    
    $sidebar.addClass('fixed');

    function isScrolledIntoView(elem)
    {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }


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

        if(isScrolledIntoView('#comments')){
            $("#side-scroller").hide();
        }
        else{
            $("#side-scroller").show();
        }
    });

これはうまく機能しますが、投稿の内容が長すぎると、コメントセクションで停止することはありません。

ここでデモを見ることができます、

通常の投稿（固定サイドバーが適切に機能する場合） http://webstutorial.com/html5-css3-toggle-slideup-slidedown/html-5

そして長い投稿（サイドバーがスクロールし続ける場所） http://webstutorial.com/google-server-side-geocoding-php-infobox/website-tweaks/google

これはスパムやリンクビルディングではないので、反対票を投じないでください

4

1 に答える 1

0

動作していると思いますが、読み込み後のページの変更により、高さが正しく計算されていません。

したがって、これを$ window.scroll関数に移動すると、スクロール時に正しい値が取得されるはずです。

$footer = $("#comments"),
footerTop = $footer.position().top;
于 2012-04-23T16:38:01.693 に答える