Navigation bottom bar that stick on the top when scolling

Hello i am using bootstrap i am looking for expert to help me implementing a navigation bar that shows in the bottom of the page and make smooth color transition from transparent to blue when scrolling down and stick to the top when it hit top of the browser something similar to this

http://themify.me/demo/#theme=parallax

Thank you.
jaylab2Asked:
Who is Participating?
 
lenamtlConnect With a Mentor Commented:
Hi,
for the sticky menu
http://getbootstrap.com/examples/navbar-fixed-top/

for the transparency color you will need to use rgba color
.navbar {
   background: rgb(65,105,225);  /* This is for ie8 and below */
   background: rgba(65,105,225,0.3); 
}

Open in new window


And you will need javascript script to have transparent transition:
http://www.cheesetoast.co.uk/fixed-top-menu-fades-shrinks-scrolling/
0
 
jaylab2Author Commented:
Thank you
I understand the concept but i have two questions

1- What that exactly mean and do

  var scroll = $(window).scrollTop();

2-   if (scroll > 0 ) {

what 0 refer explain the concept

Thank you .

$(window).scroll(function(){

  var scroll = $(window).scrollTop();

  if (scroll > 0 ) {
    $('nav').addClass('scrolled');
  }

  if (scroll <= 0 ) {
    $('nav').removeClass('scrolled');
 }

});

Open in new window

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.