自舉浮動導航欄和錨點對齊

我有什麼似乎是一個常見問題。我有一個自舉導航欄，它浮在屏幕的頂部。自舉浮動導航欄和錨點對齊

但是：

頁面的頂部50像素是通過導航欄覆蓋 - 但是我可以修復與body { padding-top: 70px;}
當我嘗試並導航到mypage.html#foo瀏覽器對準錨的top該頁面，切斷頂部50px。我可以通過一個使用window.scrollTo的腳本來解決這個問題，但這有點冒失鬼
當我點擊我的頁面時也會發生同樣的情況，並且不會調用onload處理程序。

有沒有簡單的解決方案呢？我可以在每個鏈接上重寫點擊處理程序，但這看起來很糟糕。我可以鉤上一些onnavigate事件嗎？

這似乎是浮動導航欄非常常見的問題，那麼是否有更簡單的解決方案？根據要求

發佈代碼：它

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 
<head> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
</head> 
 
<body> 
 
    <div class="navbar-wrapper"> 
 
    <div class="container"> 
 
     <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
 
     <div class="container"> 
 
      <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="/">Hello</a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="container"> 
 
    <h1><a name="1"></a>1</h1> 
 
    <h1><a name="2"></a>2</h1> 
 
    <h1><a name="3"></a>3</h1> 
 
    <h1><a name="4"></a>4</h1> 
 
    <h1><a name="5"></a>5</h1> 
 
    <h1><a name="6"></a>6</h1> 
 
    <h1><a name="7"></a>7</h1> 
 
    <h1><a name="8"></a>8</h1> 
 
    <h1><a name="9"></a>9</h1> 
 
    <p><a href="#2">Go to 2</a></p> 
 
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</body> 
 
</html>

的問題是：

'1' 被切斷的頂部（容易解決）
如果您去test.html#2，'2'被切斷頂部
如果你點擊「進入2」鏈接，「2」仍是頂部切斷

這會是很好，如果有就解決這些問題的所有3一件簡單的事情 - 我所能發現此刻是3名獨立的黑客:)

來源

2017-03-02 Gordon Williams

你有任何的代碼嗎？我們可以看到你至少在做什麼 – Toxide82

已更新的問題與示例代碼 –

您是否嘗試創建一個div來保存您的內容，並在div上填充頂部？ –

好吧，我解決了這個由：

使用非固定的導航欄
創建從頂部50像素除了充滿整個屏幕滾動的div並把所有內容都放在裏面。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 
<head> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
</head> 
 
<body> 
 
    <div class="navbar-wrapper"> 
 
    <div class="navbar navbar-inverse" role="navigation"> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="/">Hello</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div style="position:absolute;top:50px;bottom:0px;left:0px;right:0px;overflow:auto"> 
 
    <div class="container"> 
 
    <h1><a name="1"></a>1</h1> 
 
    <h1><a name="2"></a>2</h1> 
 
    <h1><a name="3"></a>3</h1> 
 
    <h1><a name="4"></a>4</h1> 
 
    <h1><a name="5"></a>5</h1> 
 
    <h1><a name="6"></a>6</h1> 
 
    <h1><a name="7"></a>7</h1> 
 
    <h1><a name="8"></a>8</h1> 
 
    <h1><a name="9"></a>9</h1> 
 
    <p><a href="#2">Go to 2</a></p> 
 
    </div> 
 
    </div> 
 
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</body> 
 
</html>

它仍然感覺應該做一個固定的導航欄工作的更好的方法，但是，嘿。

來源

2017-03-17 10:05:40

自舉浮動導航欄和錨點對齊

回答

相關問題