?
Solved

JQuery/Bootstrap Sticky Nav Bar

Posted on 2014-02-14
8
Medium Priority
?
568 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

 

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
 
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 2000 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
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…
Suggested Courses
Course of the Month8 days, 7 hours left to enroll

764 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