How to use the new affix plugin in twitter's bootstrap 2.1.0?

后端未结

关注

 9  1560

The bootstrap documentation on that topic is a little confusing to me. I want to achieve similar behaviour like in the docs with the affix navbar: The navbar is below a para

相关标签:

9条回答

萌比男神i

2020-11-29 15:36

You just need to remove the script. Here is my example:

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>

  <style>
  #content {
    width: 800px;
    height: 2000px;
    background: #f5f5f5;
    margin: 0 auto;
  }
  .menu {
    background: #ccc;
    width: 200px;
    height: 400px;
    float: left;
  }
  .affix {
    position: fixed;
    top: 20px;
    left: auto;
    right: auto;
  }
  </style>

</head>
<body>
    <div id="content">
        <div style="height: 200px"></div>

        <div class="affix-top" data-spy="affix" data-offset-top="180">
            <div class="menu">AFFIX BAR</div>
        </div>
    </div>
</body>
</html>

0 讨论(0)

余生分开走

2020-11-29 15:44

You need to remove .affix() from your script.

Bootstrap gives the option of accomplishing things either via data-attributes or straight JavaScript most of the time.

0 讨论(0)
发布评论:

提交评论
- 加载中...
北荒

2020-11-29 15:45
Similar to the accepted answer, you can also do something like the following to do everything in one go:
```
$('#nav').affix({
  offset: { top: $('#nav').offset().top }
}).wrap(function() {
  return $('<div></div>', {
    height: $(this).outerHeight()
  });
});
```
This not only invokes the affix plugin, but will also wrap the affixed element in a div which will maintian the original height of the navbar.
0 讨论(0)
发布评论:

提交评论
- 加载中...

上一页 1 2