Question

我想在这个例子中插入粘性导航上方的div：

http://www.codeply.com/go/bp/ACfflljMW1

但是，当我尝试实现它时，它似乎不起作用。是否有一些明显的东西我缺少这个解决方案才能正常工作？

    <!DOCTYPE html>
    <html lang="en">

      <head>

      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <title>Title</title>

      <link href="css/bootstrap.min.css" rel="stylesheet">

      <script src="js/jquery.js"></script>

      <style type="text/css">
         /* CSS used here will be applied after bootstrap.css */
         .affix {
            top: 0;
            width: 100%;
         }

         .affix + .container-fluid {
            padding-top: 70px;
         }
      </style>

  </head>

  <body>
     <div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
    <h1>Bootstrap Affix Example</h1>
    <h3>Fixed (sticky) navbar on scroll</h3>
    <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
    <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
  </div>

  <nav class="navbar navbar-inverse navbar-static-top" data-spy="affix" data-offset-top="197">
    <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>
    <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>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
  </div>
     <script type="text/javascript">
        $('[data-toggle=popover]').popover({placement: function() {
                 if($('.navbar-inverse').hasClass('affix-top')) {
                         console.log("top");                    
                         return 'top';
                  }
                  else {
                      console.log("bottom");
                      return 'bottom';
                  }
              }                
          });
  </script>>
  </body>
  </html>

Answer 1

因此，在检查Google Chrome上的错误后，我的jquery版本太高了。

使用jquery 1.9及以下版本3，它将起作用！

Bootstrap在div导航上方插入div

1 个答案: