粘性標題和內部鏈接

我已經使用CSS來製作一個「粘性標題」，它始終在頁面頂部可見，其他內容在它下面。在標題中我有一些內部鏈接。問題是當單擊一個鏈接時，頁面會滾動，以便目標位於頁面的頂部 - 被粘滯標題隱藏 - 而不是在其下方。粘性標題和內部鏈接

有關如何解決此問題的任何建議？

CSS：

#header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 3.5em; 
    padding:0; 
    margin: 0; 
} 

#container { 
    width: 100%; 
    margin: 3.5em 0 0 0; 
    padding: 0; 
    overflow:auto; 
} 

#content { 
    padding: 0 4em; 
    margin: 0; 
}

HTML：

<body> 

    <div id="header"> 
     <div id="content"> 
      <p> 
       <a href="#xyz">XYZ</a> 
      </p> 
     </div> <!--end content--> 
    </div> <!--end header--> 

    <div id="container"> 
     <div id="content"> 
      <p>A lot of text.</p> 
      <a name="xyz"></a> 
      <p>A lot of text</p> 
     </div><!--end content--> 
    </div><!--end container--> 

</body>

來源

2011-10-10 user635817

一件簡單的事情做的是把<a name="xyz"></a>小幅上漲的文本。

這將需要一些試驗和錯誤，但它可能是最快/最容易做的事情。

你可以做的另一件事是動態地添加margin或padding鏈接被點擊的時候。

來源

2011-10-10 19:59:03

你也可以在你的CSS文件中設置一個與你的xyz-fragment的粘性頭一樣高的頂邊。這可能會導致您的結果HTML頁面中的空白空缺...

來源

2011-10-10 20:03:43 supertopi

開始爲頭部和容器內的內容部分獲取唯一的ID。也許你可以把ul放在內部鏈接的標題中。設置包裝內的內容的位置絕對，等瞧！

有什麼地方可以看看你的問題嗎？

來源

2011-10-10 20:08:20 oceanmountain

的JavaScript點點（jQuery的使用這裏）可以做到這一點：

$('#header a').click(function (e) { 
    e.preventDefault(); 

    var offset = $('a[name=' + $(this).attr('href').substr(1) + ']').offset(); 

    $('html, body').animate({ scrollTop: offset.top - $('#header').outerHeight() }, 'fast'); 
});

這個發現與匹配鏈接的href屬性點擊的name屬性的元素，然後動畫滾動到元素的位置減去標題的高度。

http://jsfiddle.net/blineberry/bTa8b/

來源

2011-10-10 20:24:57 Brent