bootstrap navbar not making itself sticky without fixed width

Question

I have a twitter-bootstrap navbar in the middle of some content and I would like to make it sticky.

I am using the sticky jquery plugin, github page.

As it says in the github page itself:

In some cases you might need to set a fixed width to your element when it is "sticked"

I've experimented with this and:

• Here is a non working example without a fixed width.
• Here is a working example with a fixed width.

The only difference lies here:

width:20px;

The problem is that I can't make it work for my navbar that when scrolled just jumps to a smaller width and stays in place.

See the example here.

No now I'm conflicted as to how to solve the problem since I am happy the way the navbar is looking, would adding a fixed width break the twitter-bootstrap functionality?

The other problem is that even when adding a fixed width, it doesn't become sticky either.

Here is the example where I have added:

#stickynavbar{
    width:200px;
}

So the question I have is either:

• How to solve this particular problem or
• Since it is very early in the projects life, maybe another plugin or a solution outside the box will serve me just as good.

Whatever pointers in the right direction, solving this particular problem or avoiding them by using a completely different approach will do.

Answer 1

To avoid fixing code, i recommend hcSticky jQuery plugin.

Implementation is easy: $('selector').hcSticky();

After implementing this plugin, your code looks like THIS FIDDLE.