1

http://communitychessclub.com/index.phpは、永続的な位置を使用する長いWebページです： http：//blog.yjl.im/2010/01/stick-div-at-top-のコードに基づく固定メニューafter-scrolling.html

ただし、メニューには同じページのIDへのリンクが含まれており、クリックすると、固定スクロールメニューがの一部を遮ります。例：http ：//communitychessclub.com/#officialとすると、対象の記事のテキストをブロックしているメニューが表示されます。私が持っていることに注意してください、そしてそれは私が望む論理構文と場所です。

以下のjqueryを変更して、ページを1インチ下にスクロールし、メニューがターゲット記事から外れて表示されるようにする方法はありますか？メニューがターゲットID記事の上の記事をカバーしているかどうかは関係ありません。

CSS:
#sticky {margin:0 auto; display:table}
#sticky.stick {position: fixed;  top: 0; margin-left:48px; z-index: 10000; }

JS:

<script>
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top)
$('#sticky').addClass('stick')
else
$('#sticky').removeClass('stick');
}

$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>
4

2 に答える 2

1

このJavaScriptは機能します。

$(window).scroll((function() {
var a='',  // a buffer to the hash
w = $(window);
return function() {
    var h = location.hash;
    if (h != a) {   // if hash is different from the previous one, which indicates
                        // the hash changed by user, then scroll the window down
    a = h;           // update the buffer
    w.scrollTop(w.scrollTop()-100)
    }
};
})());
于 2012-11-21T05:58:20.347 に答える
1

あなたが望むものはそのコードで提供されていません。

基本的には、クリックイベントをキャプチャし、移動先の記事のIDを取得し、その要素のposition（）。topを見つけてから、ウィンドウをその場所（ある程度の距離）に移動するという考え方です。

$('.js-css-menu a').click(function(e) {
    e.preventDefault();
    $(window).scrollTop($('#' + $(this).prop('href').split('#')[1]).offset().top - 50);
});​

これはコンソールで見栄えがします。

于 2012-11-21T06:09:21.087 に答える