1

基本的に私がやりたいことは、ブログ投稿のメタ情報を常に画面に表示することです。このままでは投稿内容の左側にメタ情報（タイトル、作者など）が表示されるので、下にスクロールするとメタ情報がスムーズに画面にとどまるように設定しています。ただし、問題があります。

#comments DIV をスクロールしないとスムーズにできません。コードを微調整する方法に応じて、オーバーラップするか、ジャンプします。

私が使用しているJS関数は次のとおりです。

function brazenlyScroll() {
    var element = jQuery(".single-post .headline_area");
    var top = element.offset().top - 50;
    var elementHeight = 26 + element.height();
    var maxTop = jQuery("#comments").offset().top - elementHeight;
    var scrollHandler = function() {
        if (jQuery(document).width() > 1035) {
            var scrollTop = jQuery(window).scrollTop();
            if (scrollTop<top) {
                element.css({position:"relative",top:""})
            } else if (scrollTop>maxTop) {
                element.css({position:"absolute",top:(maxTop+"px")})
            } else {
                element.css({position:"fixed",top:"50px"})
            }
        }
    }
    jQuery(window).scroll(scrollHandler);
    jQuery(window).resize(scrollHandler);
    scrollHandler();
}

そのコードは、外部 JS ファイルを介して含まれ、ページの下部で呼び出されます。ここですべての動作を確認できます: http://www.rickbeckman.org/dumber-and-dumber-and-dumber/

どんな助けでも大歓迎です。

4

2 に答える 2

0

メタ ブロックが maxTop に達したときに 300px のパディングを与えることで、コメント div を右に縮小することができます。

于 2013-07-01T04:49:52.870 に答える
0

コードをテストしたところ、26 をより大きな数、たとえば約 60 に変更することでオーバーラップを修正できました。

var elementHeight = 26 + element.height();

お役に立てれば。

于 2013-07-31T23:30:19.437 に答える