• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 586
  • Last Modified:

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!
0
Nico2011
Asked:
Nico2011
  • 4
  • 4
1 Solution
 
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
 
leakim971PluritechnicianCommented:
Try my code instead
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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
 
leakim971PluritechnicianCommented:
table : firs mean take first table of the page.
If your search bar have an ID attribute you can use :
$("#searchbarID").sticky("....
0
 
Nico2011Author Commented:
Thank you so much - it works perfectly

GORGEOUS

:-D
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now