Solved

JQuery/Bootstrap Sticky Nav Bar

Posted on 2014-02-14
8
541 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
ID: 39861341
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
ID: 39861381
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
ID: 39861384
Try my code instead
0
 

Author Comment

by:Nico2011
ID: 39861389
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 82

Expert Comment

by:leakim971
ID: 39861391
my code say : $("table:first")
your : $("table:searchbar")
0
 

Author Comment

by:Nico2011
ID: 39861400
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
ID: 39861405
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
ID: 39861418
Thank you so much - it works perfectly

GORGEOUS

:-D
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
get radio button vale in array 7 44
validation, if text area is typed or pasted into 2 25
Angular - following an example but mine partly works 17 45
Error in JQuery 5 35
I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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…

930 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

12 Experts available now in Live!

Get 1:1 Help Now