Displaying a shadow on the fixed #topbar only if the user scrolled down

Question

I have a #top bar in my website. It is always visible at the top and travels with the user as the user scrolls. It works fine. Now I want to display a shadow on the #top bar only if the scrollbar position is > 0. If the user goes to the top, it must dissapear.

#top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 9999;
}
#top.shadow {
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

Solution (based on Godwin's answer)

$(window).scroll(function(){
    if($(window).scrollTop() > 0) {
        $('#top').addClass('shadow');
    } else {
        $('#top').removeClass('shadow');
    }
});

...but I believe that is not the best way to go -- seems to have a low performance on old computers/browsers. Any ideas?

score 6 · Accepted Answer · edited Nov 26 '12 at 21:29

6

Here's a solution using jQuery:

$(document).ready(function(){
  $(window).scroll(function(){
    var y = $(window).scrollTop();
    if( y > 0 ){
      $("#top-shadow").show();
    } else {
      $("#top-shadow").hide();
    }
  });
})

edited Nov 26 '12 at 21:29

Alexander

23,432
11
63
73

answered Dec 01 '11 at 03:20

Godwin

9,739
6
40
58

on what event do would you fire (and how) the addclass('shadow') ? – Andres SK Dec 01 '11 at 03:24
Oh wait, I had your conditions reversed. I'm reading things too quickly. – Godwin Dec 01 '11 at 03:26
Apparently you can't vote down your own post, so I updated with a solution using jQuery. By the way, do these old browsers even support box-shadow? – Godwin Dec 01 '11 at 03:41
good point, they don't. But still, they will have to fire the event .scroll() event :s – Andres SK Dec 01 '11 at 03:44
i'll go test now on an old machine with IE7 to see if the rendering gets affected. – Andres SK Dec 01 '11 at 03:46
@andufo: not if you detect if the browser supports box shadow before binding the event. – Godwin Dec 01 '11 at 03:48
how can I detect the support of that feature? – Andres SK Dec 01 '11 at 03:49
someone already has the solution for that :) http://stackoverflow.com/questions/3524554/how-to-check-if-css-box-shadow-is-supported-jquery – Andres SK Dec 01 '11 at 03:53
Ok good, I hope that works for you, I was having trouble testing this in IE7 but if it doesn't this should work I think (and right now gives you an alert to let you know if it is or isn't supported). http://jsfiddle.net/82rQt/4/ – Godwin Dec 01 '11 at 03:57

adeneo · Answer 2 · 2013-04-23T20:12:52.190

1

Just for fun, here's another way to do it:

var elm = $("#top");

$(document).scroll(function() {
    elm.toggleClass('shadow', elm.offset().top > 0);
});

edited Apr 23 '13 at 20:12

answered Dec 01 '11 at 04:02

adeneo

312,895
29
395
388

ScottS · Answer 3 · 2015-09-27T21:53:23.000

A solution that uses just css, assuming the shadow is a small one: http://jsfiddle.net/cJuFz/111/.

body { /* just for illustration */
    height: 2000px; 
    background-color: white;
}
body:before,
#top,
body:after {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 9999;
    background-color: yellow;
}
body:before{
    content: '';
    display: block;
    z-index: 9997;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
body:after {
    content: '';
    display: block;
    position: absolute; /* this needs to scroll */
    background-color: white; /* match background of body */
    top: 80px;
    height: 3px; /* covers height of :before shadow */ 
    z-index: 9998; /* overlap :before, moves on scroll */
}

i've never messed around with the body element :before and :after... let me see if i can implement that. — Andres SK, Dec 01 '11 at 03:45
If for some reason that poses a problem, then it could be done just the same with a `div` wrapping the whole page and putting the `:before` and `:after` on that instead. — ScottS, Dec 01 '11 at 11:52

Displaying a shadow on the fixed #topbar only if the user scrolled down

3 Answers3