Question

Simple question, somebody help out? Confused on this.

The navbar in question is hidden when the page loads, and is shown after a form submission along with all the content.

Here is the navbar code:

<div class="navbar" id="mainnav">
<navbar inner code><ul><li's></li's></ul></navbarcode></div>

<div id="contentwrap" class="row" data-spy="scroll" data-target="#mainnav">
Content with all the anchors
</div>

It isn’t attaching itself to the screen, it isn’t spying on the content as I scroll or anything.

Not quite sure. I’m using bootstrap so all relevant files are included. I’ve copied multiple examples verbatim and can’t get it to work.

Here’s a jsfiddle with the full code: http://jsfiddle.net/ccRnM/7/

Note: This navbar is not at the top of the page, there is an image that sets above it and I want to be able to scroll past that into the page content and have the navbar then take hold, somewhat like they do in their example on the bootstrap site.

Ideas?

Answer 1

Here is one way of doing this. http://jsfiddle.net/panchroma/8jPNm/

Instead of using scrollspy via javascript I used

<div class="navbar" id="mainnav" data-spy="affix" data-offset-top="85">

85 is the distance the screen needs to scroll before the navbar affixed, so play with this.

I also added some CSS to position the navbar after it’s affixed, and added the bootstrap.min.js to the page resources.

Good luck!