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

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.
0
jaylab2
Asked:
jaylab2
1 Solution
 
lenamtlCommented:
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

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

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