Question

我有这张大照片占据了100％x100％的屏幕尺寸，而且上面有固定的滑块。

当你从没有它的导航栏向下滚动这个大标题照片时，我想淡出（隐藏）这个绿色标志。

我该怎么做？

http://i.stack.imgur.com/BiUfE.jpg这是照片

Answer 1

如果您希望徽标与页面一起滚动，只需将其放在HTML中的菜单栏之外，并使用绝对位置（JS Fiddle）。

如果你希望它一旦离开滑块就淡出，你可以使用jQuery，这是一个例子：

//Some variables, to avoid calculating these values at every scroll
var logo = $('#logo');
var sliderBottom = $('#slider').offset().top + $('#slider').height() - logo.height();

//On every scroll
$(window).scroll(function(){
    // if we're past the slider and the logo is still visible
    if($(window).scrollTop()>sliderBottom && logo.is(':visible')){
        logo.stop().fadeOut(300);
    }
    // if not
    else if($(window).scrollTop()<sliderBottom && logo.is(':hidden')){
        logo.stop().fadeIn(300);
    }
});

向下滚动时，只隐藏固定div中的一个元素

1 个答案:

JS Fiddle Demo