Solved

Navigation bottom bar that stick on the top when scolling

Posted on 2015-01-21
4
53 Views
Last Modified: 2016-01-03
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
Comment
Question by:jaylab2
[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 Comments
 
LVL 25

Accepted Solution

by:
lenamtl earned 500 total points
ID: 40564790
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
 

Author Comment

by:jaylab2
ID: 40565898
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

Major Incident Management Communications

Major incidents and IT service outages cost companies millions. Often the solution to minimizing damage is automated communication. Find out more in our Major Incident Management Communications infographic.

Question has a verified solution.

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

A publishing tool, a Version Control System, or a Collaboration Platform! These can be some of the defining words for the two very famous web-hosting Git repositories: Bitbucket and Github. Git is widely used amongst the programmers and developers f…
This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

705 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