在頁面中集成基於Java的頁面滾動控件

Question

我創建了一個帶有固定標題的站點。我發現這會導致一個問題

• 當有人點擊該頁面向下/向上鍵，渦管的長度過長

，由於它不remving頭的高度（和在它下面填充一點點）從滾動長度。所以（舉個例子），如果你在頁面的開頭，點擊「page down」，你必須手動回滾一下，以匹配你以前離開的地方，而不會錯過任何內容。

我發現了我認爲在這個基於Java的頁面

滾動控制，要解決這個問題：

• https://stackoverflow.com/a/6395433/1858759

• http://jsfiddle.net/bpMCE/

它的工作在演示頁面中已經足夠了。然而，無論我做什麼（這給了我這種初學者的技能水平），我都無法控制我的頁面。我有另一個人看看它並提供建議，但他們都沒有解決這個問題。他做的一件事是調整「bar」內容與原始的Javascript代碼。我在下面粘貼了這個修改後的代碼，與上面的原始鏈接進行比較。

我的網頁實際內容尚未託管。一位朋友主持了一個我用通用內容製作的「虛擬」頁面，但是與我的其他一些頁面相同的代碼（我還沒有準備好公開內容）。這裏的鏈接：

• http://www.11fifty.com/Site_108/before.html

我完全同意這個難住了。根據需要閱讀檔案，我發現了一些很好的建議，所以我希望有人能夠理解這一點。另外，我希望它能幫助其他人想要在他們自己的固定標題站點中糾正這一點。

在此先感謝...

---

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

Answer 1

你需要做的是添加一個類標籤（讓我們將其命名爲類=「新」），以每個項目的名單上，處理按鍵事件滾動到下一個項目或前一個，這個代碼可以幫助你：

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

Answer 2

在你的樣品頁頁眉的class是header不是id，所以這是行不通的：

document.getElementById('header')

這正好爲content了。更改這些2行：

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

到

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

爲什麼你在它添加一個分號到該行的末尾：

var content, header 

如果是這種情況並非如此，然後創建你自己的jsfiddle來顯示你的確切代碼。