背景滾動佈局

Question

基本上，我創造了我的學校項目的網頁...對不起愚蠢的解釋，但..

我想在網站的頂部有固定的導航欄，當你點擊任何鏈接將你向上或向下移動到所請求的內容（而不是不同的子頁面，只需滾動向上/向下）..

看到這裏的例子：http://www.danbrown.com/

但是我只需要如何做到這一點的最簡單方法...我沒有找到任何教程。

謝謝

Answer 1

您需要爲您的菜單使用固定位置。 http://www.w3schools.com/css/css_positioning.asp

並滾動到頁面中的特定位置使用鏈接錨點。 http://www.echoecho.com/htmllinks08.htm

我可以爲你編碼ole事物，但你什麼都不會學。

Answer 2

鏈接錨點完全是你想要的最簡單也是最可靠的方法。

<a name="a">text</a>或<a id="a">text</a>都在某處設置錨點，並且<a href="#a">text</a>會將視口滾動到該鏈接。

您也可以設置其他元素，比如標題的id屬性，使它們變成錨目標，但name屬性將只對<a>標籤工作。

Answer 3

作爲一個起點，您可以使用以下twitter引導程序演示來執行固定的導航欄。 只需要jQuery代碼來製作滾動動畫。它也可以用於jQuery。 在演示中，您應該對導航進行更改以顯示當前滾動位置。這不在演示中。

你可以在這裏找到相同的代碼jsFiddle。

最初的滾動效果不難做到。請在這SO question檢查我的anwser，這將幫助你做到這一點。 （你也可以做固定導航從反例的代碼，做你自己的菜單樣式。）

$(function() { 
 
    // source for transition animation from here: https://stackoverflow.com/questions/12643510/css3-transitions-with-anchors 
 
    $('a[href^=#]').on("click", function (e) { 
 
     var t = $(this.hash); 
 
     var t = t.length && t || $('[name=' + this.hash.slice(1) + ']'); 
 
     if (t.length) { 
 
      var tOffset = t.offset().top; 
 
      $('html,body').animate({ 
 
       scrollTop: tOffset - 20 
 
      }, 'slow'); 
 
      e.preventDefault(); 
 
     } 
 
    }); 
 
});

body { 
 
    min-height: 2000px; 
 
    padding-top: 50px; 
 
} 
 
/* anchor style to scroll to the right position */ 
 
a.anchor { 
 
    display: block; 
 
    position: relative; 
 
    top: -20px; 
 
    visibility: hidden; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 
<!-- Fixed navbar --> 
 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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="#">Project name</a> 
 

 
     </div> 
 
     <div id="navbar" class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="active"><a href="#dummy1">Dummy 1</a> 
 

 
       </li> 
 
       <li><a href="#dummy2">Dummy 2</a> 
 

 
       </li> 
 
       <li><a href="#contact">Contact</a> 
 

 
       </li> 
 
       <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 

 
        <ul class="dropdown-menu" role="menu"> 
 
         <li><a href="#">Action</a> 
 

 
         </li> 
 
         <li><a href="#">Another action</a> 
 

 
         </li> 
 
         <li><a href="#">Something else here</a> 
 

 
         </li> 
 
         <li class="divider"></li> 
 
         <li class="dropdown-header">Nav header</li> 
 
         <li><a href="#">Separated link</a> 
 

 
         </li> 
 
         <li><a href="#">One more separated link</a> 
 

 
         </li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
     <!--/.nav-collapse --> 
 
    </div> 
 
</nav> 
 
<div class="container"> 
 
    <div class="row"> <a class="anchor" id="dummy1"></a> 
 

 
     <h1>Dummy 1</h1> 
 

 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p> 
 
    </div> 
 
    <div class="row"> <a class="anchor" id="dummy2"></a> 
 

 
     <h1>Dummy 2</h1> 
 

 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p> 
 
    </div> 
 
</div>