Отображение тени на фиксированной панели #top, только если пользователь прокрутил вниз - PullRequest
Новая
       13

Отображение тени на фиксированной панели #top, только если пользователь прокрутил вниз

0 голосов
/ 01 декабря 2011

У меня есть #top бар на моем сайте.Он всегда виден вверху и путешествует с пользователем по мере его прокрутки.Работает нормально.Теперь я хочу отобразить тень на панели #top только , если позиция полосы прокрутки > 0 .Если пользователь идет наверх, он должен исчезнуть. 

#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);
}

Решение (на основе ответа Годвин ) 

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

... но я считаю, что это не лучший способ - похоже, низкая производительность на старых компьютерах / браузерах.Есть идеи?

Ответы [ 3 ]

6 голосов
/ 01 декабря 2011

Вот решение с использованием jQuery: 

$(document).ready(function(){
  $(window).scroll(function(){
    var y = $(window).scrollTop();
    if( y > 0 ){
      $("#top-shadow").show();
    } else {
      $("#top-shadow").hide();
    }
  });
})​
1 голос
/ 01 декабря 2011

Просто для удовольствия, вот еще один способ сделать это: 

var elm = $("#top");

$(document).scroll(function() {
    elm.toggleClass('shadow', elm.offset().top > 0);
});
0 голосов
/ 01 декабря 2011

Решение, которое использует просто CSS, при условии, что тень маленькая: 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 */
}
...