Solved

Navigation bottom bar that stick on the top when scolling

Posted on 2015-01-21
4
41 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
4 Comments
 
LVL 24

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Thoughout my experience working on eCommerce web applications I have seen applications succumbing to increased user demand and throughput. With increased loads the response times started to spike, which leads to user frustration and lost sales. I ha…
It’s a strangely common occurrence that when you send someone their login details for a system, they can’t get in. This article will help you understand why it happens, and what you can do about it.
Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

919 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

17 Experts available now in Live!

Get 1:1 Help Now