背景滚动布局

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>