Question

我想制作像w3school.com这样的顶级固定导航栏？当我向下滚动时，顶部导航栏将固定，徽标不会。如何使用bootstrap css framewok做到这一点？是只能与w3.css一起使用？我对此表示怀疑。谢谢！

#logo {
    text-align: center;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>

<div id="logo">
  <img src="http://lorempicsum.com/futurama/350/200/1"/>
</div>

<div id="nav">
    <ul class="nav nav-tabs navbar-fixed-top">
      <li><a href="...">Fixed</a></li>
      <li><a href="...">Fixed</a></li>
      <li><a href="...">Fixed</a></li>
      <li><a href="...">Fixed</a></li>
      <li><a href="...">Fixed</a></li>
      <li><a href="...">Fixed</a></li>
     </ul>
 </div>
  
  <p> i want the navbar fixed like w3school.com when it the scroll down until reach the image the navbar will fixed. sorry for bad english.  visit w3school to see the navbar fixed top </p>

Answer 1

是的，所以你不能只使用CSS，你会想要使用某种粘性库。我在这个示例中使用Object.entries。

＆＃13;

$("#nav").stick_in_parent();

＆＃13;

#logo {
    text-align: center;}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.sticky-kit/1.1.2/jquery.sticky-kit.min.js"></script>

<body>

<div id="logo">
  <img src="http://lorempicsum.com/futurama/350/200/1"/>
</div>

<div id="nav">
    <ul class="nav nav-tabs">
      <li><a href="...">Fixed</a></li>
      <li><a href="...">Fixed</a></li>
      <li><a href="...">Fixed</a></li>
      <li><a href="...">Fixed</a></li>
      <li><a href="...">Fixed</a></li>
      <li><a href="...">Fixed</a></li>
     </ul>
 </div>
  
  <p> i want the navbar fixed like w3school.com when it the scroll down until reach the image the navbar will fixed. sorry for bad english.  visit w3school to see the navbar fixed top Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non arcu sed nisl vehicula gravida. Donec arcu ante, consectetur ut neque et, finibus dignissim magna. Nam vitae felis porta, scelerisque diam ac, tristique felis. Ut id lectus diam. Fusce vel felis eu arcu porta imperdiet. Suspendisse justo velit, ultricies ut ultrices vel, mollis et elit. Maecenas at pharetra arcu, sed vestibulum urna. Donec a consectetur elit.

Ut nisl nisi, blandit sed tellus ac, vulputate posuere ex. Integer rutrum massa vel tincidunt lobortis. Donec eget rhoncus nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus sed turpis hendrerit, maximus metus eleifend, sollicitudin enim. Donec ac congue ante. Praesent mi risus, auctor ac imperdiet non, iaculis id risus. Ut viverra et velit eget luctus. Mauris eu aliquam nisl. Nullam auctor augue id justo volutpat, nec consectetur neque volutpat.

Integer et urna tellus. Donec a fringilla erat. Nam ex urna, consequat ut sodales ut, congue in sem. Maecenas et tortor risus. Suspendisse maximus felis mauris. Duis porttitor mi eu finibus eleifend. Mauris ac pulvinar leo. Phasellus hendrerit faucibus sagittis. Donec rhoncus mattis lacinia. Nullam pulvinar urna at leo aliquam lacinia. Phasellus fringilla, augue eget posuere elementum, enim purus lacinia erat, eget gravida lectus ex sed dolor. Maecenas non neque eu nisi fringilla ornare. Fusce odio neque, volutpat in felis sed, consequat mattis leo. Praesent et mauris euismod, fringilla ipsum in, dignissim nisl. Duis quis lacus at nulla semper semper.

Cras massa mauris, mattis ac lorem ac, tempor eleifend est. Donec gravida tincidunt tristique. Nam semper id odio id viverra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam eu sagittis arcu, ut pretium elit. Pellentesque id elit eu ex rutrum cursus vitae et metus. Sed enim leo, mollis non malesuada quis, imperdiet sed mi. Vestibulum pretium, augue a hendrerit hendrerit, quam est accumsan leo, at accumsan nulla diam sed justo.

Pellentesque ut lacus gravida, scelerisque massa vel, venenatis sapien. Integer id justo a augue rutrum pellentesque ac efficitur ex. Cras interdum enim quis libero tempor faucibus. Vivamus eu diam eu sapien ultricies vestibulum. Ut consequat felis at ligula dictum rutrum. Sed eget ullamcorper leo, vitae sodales justo. Pellentesque nec tellus felis. Aenean augue sem, tristique consequat magna a, efficitur ultrices ligula.</p>

＆＃13;

Answer 2

这就是你想要的：

＆＃13;

from pylab import*
from mpl_toolkits.mplot3d import Axes3D
ax = Axes3D(figure())
rad=linspace(0,5,100)
azm=linspace(0,2*pi,100)
r,th=meshgrid(rad,azm)
z=(r**2.0)/4.0
subplot(projection="polar")
pcolormesh(r,th, z)
show()

＆＃13;

如何像w3school一样制作固定的导航栏

2 个答案: