Question

如果你运行代码片段，看起来这个词缀只能平稳地向下移动并且不会顺利向上移动，我该如何实现呢？我想知道位置元素是否有问题，但似乎我无法使它运作良好。

<!DOCTYPE html>
<html>
<head>
 <title>Bootstrap Example</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet"      href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">        </script>
 <script     src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">   </script>

 <style>
   .affix {
      top: 0;
      width: 100%;
      -webkit-transition: all 0.9s ease-in-out;
      transition: all 0.9s ease-in-out;
         }
    .affix-top {
       position: static;
       top: -35px;
        }

  </style>
</head>

<body>

   <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="190">
     <ul class="nav navbar-nav">
      <li class="active"><a href="#">Basic Topnav</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
     </ul>
   </nav>
    <div class="container-fluid" style="height:1000px">
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
    </div>

 </body>
</html>

如何使Bootstrap 3导航栏固定顺利移动？

0 个答案: