2013-04-25 68 views
0

固定的菜單我見過幾個Q &上,但我似乎無法得到任何人在我的情況下工作,如:jQuery Smooth Page Anchor Transitions with position:fixed menu
:(滾動錨+調整在頂部

頁面示例:http://fpco-site.squarespace.com/familylife

當您向下滾動頁面時,主菜單將粘貼/修復到頂部,還有一個與固定菜單相關聯的下拉菜單(在頁面中可能還有其他地方)。常規鏈接以及錨鏈接。當錨點鏈接被點擊時,菜單&下拉菜單中的內容在修復時被掩蓋d位置。

我需要跳轉到錨點以適應菜單和打開時的下拉菜單。對於內容在滾動到錨點時以及在下拉菜單打開和關閉時向上和向下滾動進行動畫上下移動都是理想的。

萬一它很重要,我的錨在整個頁面都通過jquery添加。

我嘗試以下,但有一些錯誤的代碼,打破我的下拉菜單:

/* scrollTo */ 
    function scrollTo(id){ 
     $('html,body').animate({scrollTop: $(id).offset().top},'slow'); 
    }; 
    $('a[href^="#"]').click(function(){ 
     scrollTo($(this).attr('href')); 
     return false; 
    }); 

我想如果我能得到那個工作,然後,然後我可以在添加在附加offest工作帳戶的菜單,然後嘗試抵消下拉打開/關閉。但我無法得到這個第一個想法工作....

回答

0

我能夠解決這個在我的情況通過使用一些CSS重新定位我的錨點。在我的情況下,錨不適用於任何視覺元素,所以我可以移動它們而不會傷害任何東西。我用:

.anchor { 
position: relative; 
top: -160px; 
height: 1px; 
display: block; 

}

我還告訴下拉被點擊下拉一個錨鏈接時關閉。這樣我就不必擔心下拉是打開還是關閉。

,現在當我點擊進入其中一個錨點是排隊的權利在我的固定菜單頂部:) 有可能是一個更好的辦法,但是這對我的作品!〜

下一步看看我是否可以讓它動畫滾動到錨點而不是跳到它。這將是很好:)