固定偏移的jQuery ScrollTo和jQuery航點以正常工作

我使用我的站點中的兩個jQuery插件來完成兩件事情：固定偏移的jQuery ScrollTo和jQuery航點以正常工作

jQuery Waypoints - 所以，當我向下滾動頁面，並獲得各部，相應的菜單鏈接下方的黑條變爲白色：
jQuery ScrollTo - 我使用此來平滑部分之間滾動時喲你點擊一個主菜單鏈接。

我的問題是，當我手動向下滾動頁面，適當選擇的類被添加到通過航點主菜單鏈接（打開欄下方白色如上所示），它應。但是當我點擊主菜單上的實際鏈接時，直到我手動進一步向下滾動，它纔會起作用。兩種腳本都有一些偏移選項，我相信它們可以使它正常工作，但我無法弄清楚。我設置了一個jsFiddle（http://jsfiddle.net/j5Guz/）。這裏是我當前的jquery：

$(function() {      
    var sections = $('section'); 
    var navigation_links = $('nav a'); 
    sections.waypoint({ 
    handler: function(event, direction) { 
     var active_section; 
     active_section = $(this); 
     if (direction === "up") active_section = active_section.prev(); 
     var active_link = $('nav a[href="#' + active_section.attr("id") + '"]'); 
     navigation_links.removeClass("selected"); 
     active_link.addClass("selected"); 
    }, 
    offset: '35%' 
    }); 

    navigation_links.click(function(event) { 
     $.scrollTo(
     $(this).attr("href"), 
     { 
      duration: 500, 
      offset: { 'left':0, 'top':-0.15*$(window).height() } 
     } 
    ); 
    }); 

});

來源

2013-06-27 callmedpit

可能沒關係，但'handler：function（event，direction）'是舊的1.x處理程序簽名，但是你的小提琴使用Waypoints 2.0.2，它只是使用：'handler：function（direction）'。 – imakewebthings

似乎是的jsfiddle並沒有得到充分的工作（向下滾動時，導航欄不保存在視圖中），但我有這個確切的同樣的問題，在導航欄的過渡與手動工作滾動，但點擊時，不太正確的位置。

我的解決方案是使用Firebug檢查導航欄元素，然後查看Layout選項卡，它將顯示導航欄的精確總像素高度，包括填充和邊距。然後，您可以設置offset以匹配總像素高度。例如如果導航欄高度爲85個像素，然後在設置我有，

<body id="the-page" data-target=".navbar" data-offset="85" data-spy="scroll">

這裏，一旦data-offset是正確的，那麼導航欄點擊鏈接將得到在頁面上正確的位置，以及改變突出顯示在導航欄中的部分。

來源

2013-09-19 13:26:59 limist

固定偏移的jQuery ScrollTo和jQuery航點以正常工作

回答

相關問題