<head> of your document like this. The file that I'm using the subnav in is in the root of my site hence the path.
<link href="../docs/assets/css/docs.css" rel="stylesheet"> <body> looks like this
<body data-spy="scroll" data-target=".subnav" data-offset="50"> <script src="/docs/assets/js/application.js"></script> Revisions
- September 21, 2012 @ 14:59:24 [Current Revision] by PeterLugg
- September 21, 2012 @ 14:58:58 by PeterLugg
- September 21, 2012 @ 14:57:02 by PeterLugg
Revision Differences
| September 21, 2012 @ 14:58:58 | Current Revision | ||
|---|---|---|---|
| Content | |||
| Added: Taken from GitHub <a href="https:/ /github.com/twitter/bootstrap/ issues/1189" target="_blank">here</a>. | |||
| Unchanged: I just spent an hour figuring this out so here's how I did it. Please chip in if I'm doing something that is not necessary. | Unchanged: I just spent an hour figuring this out so here's how I did it. Please chip in if I'm doing something that is not necessary. | ||
| Unchanged: Make sure that the link to the docs.css file is in the <code>< head></code> of your document like this. The file that I'm using the subnav in is in the root of my site hence the path. | Unchanged: Make sure that the link to the docs.css file is in the <code>< head></code> of your document like this. The file that I'm using the subnav in is in the root of my site hence the path. | ||
| Unchanged: <pre><code><link href="../docs/ assets/css/docs.css" rel="stylesheet"> </code></pre> | Unchanged: <pre><code><link href="../docs/ assets/css/docs.css" rel="stylesheet"> </code></pre> | ||
| Unchanged: Make sure the <code>< body></code> looks like this | Unchanged: Make sure the <code>< body></code> looks like this | ||
| Unchanged: <pre><code><body data-spy="scroll" data-target=".subnav" data-offset="50"> </code></pre> | Unchanged: <pre><code><body data-spy="scroll" data-target=".subnav" data-offset="50"> </code></pre> | ||
| Unchanged: data-spy is for scrollspy but I leave it in as it's sweet. | Unchanged: data-spy is for scrollspy but I leave it in as it's sweet. | ||
| Unchanged: You will also need the following at the end of the document, but providing you are using one on the bootstrap templates you should be fine. | Unchanged: You will also need the following at the end of the document, but providing you are using one on the bootstrap templates you should be fine. | ||
| Unchanged: <pre><code><script src="/docs/assets/ js/application.js" ></script> </code></pre> | Unchanged: <pre><code><script src="/docs/assets/ js/application.js" ></script> </code></pre> | ||
| Unchanged: And that's it. It should work. The only problem with this approach is you get the squared background image and your logo moves to the right in the navbar but you can just comment that out in docs.css | Unchanged: And that's it. It should work. The only problem with this approach is you get the squared background image and your logo moves to the right in the navbar but you can just comment that out in docs.css | ||
| Unchanged: Hope that helps. | Unchanged: Hope that helps. | ||
| Unchanged: Then some smart alec came up with this Javascript.....whoi knows if it works? | Unchanged: Then some smart alec came up with this Javascript.....whoi knows if it works? | ||
| Unchanged: [js] // fix sub nav on scroll | Unchanged: [js] // fix sub nav on scroll | ||
| Unchanged: var $win = $(window) | Unchanged: var $win = $(window) | ||
| Unchanged: , $nav = $('.subnav') | Unchanged: , $nav = $('.subnav') | ||
| Unchanged: , navTop = $('.subnav').length && $('.subnav').offset().top - 40 | Unchanged: , navTop = $('.subnav').length && $('.subnav').offset().top - 40 | ||
| Unchanged: , isFixed = 0 | Unchanged: , isFixed = 0 | ||
| Unchanged: processScroll() | Unchanged: processScroll() | ||
| Unchanged: $win.on('scroll', processScroll) | Unchanged: $win.on('scroll', processScroll) | ||
| Unchanged: function processScroll() { | Unchanged: function processScroll() { | ||
| Unchanged: var i, scrollTop = $win.scrollTop() | Unchanged: var i, scrollTop = $win.scrollTop() | ||
| Unchanged: if (scrollTop >= navTop && !isFixed) { | Unchanged: if (scrollTop >= navTop && !isFixed) { | ||
| Unchanged: isFixed = 1 | Unchanged: isFixed = 1 | ||
| Unchanged: $nav.addClass( 'subnav-fixed') | Unchanged: $nav.addClass( 'subnav-fixed') | ||
| Unchanged: } else if (scrollTop <= navTop && isFixed) { | Unchanged: } else if (scrollTop <= navTop && isFixed) { | ||
| Unchanged: isFixed = 0 | Unchanged: isFixed = 0 | ||
| Unchanged: $nav.removeClass( 'subnav-fixed') | Unchanged: $nav.removeClass( 'subnav-fixed') | ||
| Unchanged: } | Unchanged: } | ||
| Unchanged: }[/js] | Unchanged: }[/js] | ||
Note: Spaces may be added to comparison text to allow better line wrapping.
No comments yet.