[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Navigation bottom bar that stick on the top when scolling

Posted on 2015-01-21
4
Medium Priority
?
75 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 26

Accepted Solution

by:
lenamtl earned 2000 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

Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

Question has a verified solution.

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

There is a huge demand for CodeIgniter among the PHP web developers due to its dynamic features and benefits these days. It is one of most popular and agile open source PHP framework for creating robust web applications in PHP web development field.…
While opting for any web-to-print solution, you need to discuss with your team and some of your end users and know their opinions about your decisions. In this article we list down some questions you need to ask yourself.
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

650 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