Solved

JQuery/Bootstrap Sticky Nav Bar

Posted on 2014-02-14
8
539 Views
Last Modified: 2014-02-15
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
Comment
Question by:Nico2011
  • 4
  • 4
8 Comments
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
 

Author Comment

by:Nico2011
Comment Utility
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
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
Try my code instead
0
 

Author Comment

by:Nico2011
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 82

Expert Comment

by:leakim971
Comment Utility
my code say : $("table:first")
your : $("table:searchbar")
0
 

Author Comment

by:Nico2011
Comment Utility
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
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
Comment Utility
table : firs mean take first table of the page.
If your search bar have an ID attribute you can use :
$("#searchbarID").sticky("....
0
 

Author Closing Comment

by:Nico2011
Comment Utility
Thank you so much - it works perfectly

GORGEOUS

:-D
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now