CODEWITHSUNDEEP
jquerycss
missmisunderstood
missmisunderstood

Reputation: 45

How to add a dropshadow to a navigation bar when the user starts to scroll?

Do you think it's possible to use CSS3 for this kind of effect? I am trying to achieve something like this for my navigation bar. http://garypeppergirl.com/ You can see that the style of the navigation changes when a user scrolls down? With sample website, the height changes... I want mine to have a dropshadow D: If CSS3 can't do it... do you guys know how to achieve it using Javascript or Jquery? Someone please help me. Thank you!

Upvotes: 1

Views: 1862

Answers (1)

Matthew R.
Matthew R.

Reputation: 4350

You can use jQuery's scrollTop() method to determine your scrolled distance:

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

You can then use it in conjunction with the .scroll() event and add classes to your nav. You can then style the new class with the box-shadow property:

var nav = $('#nav'); // Change to nav div
var nav_class = 'mini-nav'; // Change to class name
var threshold = 100; // Change to pixels scrolled

$(window).scroll(function () {
    var distance = $(this).scrollTop();
    if (distance > threshold) { // If scrolled past threshold
        nav.addClass(nav_class); // Add class to nav
    } else { // If user scrolls back to top
        if (nav.hasClass(nav_class)) { // And if class has been added
            nav.removeClass(nav_class); // Remove it
        }
    }
});

Here is a fiddle to get you started:

http://jsfiddle.net/X967T/5/

Upvotes: 4

Related Questions