0

固定ヘッダーのサイトを作成しました。これが1つの問題を引き起こすことを発見しました

  • 誰かがページダウン/アップキーを押したとき、そのスクロールの長さが長すぎます

スクロールの長さからヘッダーの高さ（およびその下の非常に小さなパディング）を削除しないためです。そのため (たとえば)、ページの先頭で「ページダウン」を押した場合、コンテンツを見逃さないように、前に中断した場所に一致するように手動で少し上にスクロールする必要があります。

このJavaベースのページで、この問題の解決策と思われるものを見つけました

スクロール コントロール:

デモページでは十分に機能しました。しかし、私が何をしても（この種の初心者のスキルレベルを考えると）、自分のページを制御することはできません. 別の人にそれを見て提案をしてもらいましたが、誰も問題を解決しませんでした. 彼が行ったことの 1 つは、元の Javascript コードに対して「バー」のコンテンツを調整することでした。上記のリンクされた元のコードと比較するために、この改訂されたコードを以下に貼り付けました。

実際のコンテンツを含む私のページはまだホストされていません。友人が、一般的なコンテンツで作成した「ダミー」ページをホストしていますが、他のページと同じコードを使用しています (コンテンツを公開する準備が整っていません)。リンクは次のとおりです。

私はこれに完全に困惑しています。必要に応じてアーカイブを読むことから、ここでいくつかの素晴らしいアドバイスを見つけたので、誰かがこれを理解してくれることを願っています. さらに、自分の固定ヘッダー サイトでこれを修正したい人に役立つことを願っています。

前もって感謝します...

(function(){
    var content, header
    function adjustScroll(event) {
        var e, key, remainingSpace;


        content = content || document.getElementById('content');
        header  = header  || document.getElementById('header');


        e = event || window.event;
        key = e.which || e.keyCode;


        if ( key === 33 ) { // Page up
            remainingSpace = content.scrollHeight - content.scrollTop;
            setTimeout(function () {
                content.scrollTop = (remainingSpace >= content.scrollHeight - 

header.offsetHeight) ? 0 : (content.scrollTop + header.offsetHeight);
            }, 10);
        }
        if ( key === 34 ) { // Page down
            remainingSpace = content.scrollHeight - content.scrollTop - 

content.offsetHeight;
            setTimeout(function () {
                content.scrollTop = (remainingSpace <= header.offsetHeight) ? 

content.scrollHeight : (content.scrollTop - header.offsetHeight);
            }, 10);
        }
    }


    document.onkeydown = adjustScroll;
}());
4

2 に答える 2

0

あなたclassのサンプルページでは、ヘッダーの は ではheaderないidため、これは機能していません:

document.getElementById('header')

これcontentも当てはまります。次の 2 行を変更します。

<div class="container">
   <div class="header">

に

<div id="container">
   <div id="header">

この行の最後にセミコロンを追加する理由:

var content, header

そうでない場合は、独自の jsfiddle を作成して正確なコードを表示してください。

于 2013-07-04T07:46:58.667 に答える
0

あなたがする必要があるのは、リストのすべてのアイテムにクラスタグ（class="new"と名付けましょう）を追加し、キープレスイベントを処理して次のアイテムまたは前のアイテムにスクロールすることです。このコードはあなたを助けるかもしれません:

function scrollToNew () {
  scrollTop = $(window).scrollTop();
  $('.new').each(function(i, h2){ // loop through article headings
    h2top = $(h2).offset().top; // get article heading top
    if (scrollTop < h2top) { // compare if document is below heading
      $.scrollTo(h2, 800); // scroll to in .8 of a second
      return false; // exit function
    }
  });
}

jQuery(function () {

  $("#next").click(scrollToNew);

  $(document).keydown(function (evt) {
    if (evt.keyCode == 40) { // down arrow
      evt.preventDefault(); // prevents the usual scrolling behaviour
      scrollToNew(); // scroll to the next new heading instead
    } else if (evt.keyCode == 38) { // up arrow
      evt.preventDefault();
      scrollToLast();
    }
  }

});

詳細: https://stackoverflow.com/a/2168876/2310699

于 2013-07-04T07:37:46.407 に答える