JQuery/Bootstrap Sticky Nav Bar

Hello,

I'm trying to make my search bar stick to the top of the screen when the page is scrolled down, but I don't seem to be able to get it to work...

The page this is on is here - I have entered some temporary text - I am looking to make the blue search bar stick to the top of the page when the page is scrolled down.

Help appreciated!
Nico2011Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
leakim971Connect With a Mentor PluritechnicianCommented:
table : firs mean take first table of the page.
If your search bar have an ID attribute you can use :
$("#searchbarID").sticky("....
0
 
leakim971PluritechnicianCommented:
You may use this plugin : http://stickyjs.com/

With a bit of work on your table(center it, separate part), it should do the work.
sticky
jQuery(function($) {
      $("table:first").sticky({topSpacing:30});
});

Open in new window

0
 
Nico2011Author Commented:
Thanks very much - I have done what is shown in the example, but this doesn't work on my page - not sure why not!

Any ideas?
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
leakim971PluritechnicianCommented:
Try my code instead
0
 
Nico2011Author Commented:
no joy... could it be because I have the div in a table cell?  I put your code in the head section like this:

<script>
jQuery(function($) {
      $("table:searchbar").sticky({topSpacing:30});
});
</script>

Open in new window



Is that correct?
0
 
leakim971PluritechnicianCommented:
my code say : $("table:first")
your : $("table:searchbar")
0
 
Nico2011Author Commented:
AHA!  Ok - please can you just tell me how I select the search bar with the location etc.?  The table:first works, but I cannot see how you are referring to that or specifying it.  When I change your code to name the div tag 'searchbar' it stops working...

Thanks so much for your help!
0
 
Nico2011Author Commented:
Thank you so much - it works perfectly

GORGEOUS

:-D
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.