0

HTML：

<div id="fixed">
    fixed
</div>

CSS：

 body{
        height: 1000px;
    }
    #fixed{
        background-color:yellow;
        width:100%;
        left:0;
        top:0;
        height:50px;
        position : fixed;
    }

我想让 div 的不透明度在第一次向下滚动后等于 0.1。我在网上搜索过它，但不确定使用 css 或 jquery 来完成此操作。

这是我的小提琴：http: //jsfiddle.net/44qEr/

谢谢你。

4

3 回答 3

1

如果你使用 CSS 不透明度，你仍然需要一个 javascript 后备，因为旧版本的 IE 不支持它。所以我会选择 CSS 和 javascript 后备，或者只是 javascript。

完整编辑

$(window).scroll(function() {
    var scrollYpos = $(document).scrollTop();
    if (scrollYpos > 10) {
        $('#fixed').css('opacity', .1);
        $('#fixed').addClass('scrolled');
    } else {
        $('#fixed').css('opacity', 1);
        $('#fixed').removeClass('scrolled');
    }
});

根据您的评论添加此 JS：

$(document).on('mouseenter','.scrolled',function(){
    $('#fixed').toggleClass('hover'); 
   $('#fixed').css('opacity',1);
});
$(document).on('mouseleave','.scrolled',function(){
   $('#fixed').toggleClass('hover'); 
   $('#fixed').css('opacity',.1);
});

还有这个 CSS；

#fixed.hover {
    background-image: url(http://i.imgur.com/XiawICH.png);
    background-color: transparent;
}

http://jsfiddle.net/44qEr/7/

我更新了我的 javascript，因此代码在不滚动时可以工作。您不能使用悬停元素。我确信一些 jquery 专业人士可以简化我的代码，因为我通常不会以尽可能最短的方法编写东西。

为了确定您是否没有滚动，我可以scrollYpos在悬停语句中添加一个检查，这也可以。也许更好实际上我不知道。但是，我认为这段代码更具可读性，但可能更长。

下面的代码可以在没有类的情况下工作，但是如果滚动时鼠标悬停在 div 上，顶部仍然会有些错误，我没有完成它，因为我认为另一种方式更好。

$(window).scroll(function() {
    var scrollYpos = $(document).scrollTop();
    if (scrollYpos > 10) {
        $('#fixed').css('opacity', .1);
    } else {
        $('#fixed').css('opacity', 1);
    }
});
$('#fixed').hover(function(){
   var scrollYpos = $(document).scrollTop();
   if(scrollYpos > 0){
       $('#fixed').addClass('hover'); 
       $('#fixed').css('opacity',1);
   } 
}, function(){
  var scrollYpos = $(document).scrollTop();
   if(scrollYpos > 0){
       $('#fixed').removeClass('hover'); 
       $('#fixed').css('opacity',.1);
   }
});

http://jsfiddle.net/44qEr/8/

于 2013-02-28T17:10:51.667 回答
1

只是为了扩展@Leeish的答案，使用该animate属性会更好，如下所示：此外，添加该.stop属性将防止排队动画阻碍效果。

$(window).scroll(function() {
    var scrollYpos = $(document).scrollTop();
    if (scrollYpos > 10) {
        $('#fixed').stop(true);
        $('#fixed').animate({'opacity': .3},500);
    } else {
        $('#fixed').stop(true);
        $('#fixed').animate({'opacity': 1},500);
    }
});

演示：http: //jsfiddle.net/44qEr/4/

于 2013-02-28T17:31:42.323 回答
0

您可以使用计时器来检查窗口滚动是否已更改并根据需要设置不透明度。

(function(){
    var $fixed = $('#fixed');
    var $window = $(window);
    var old = 0;
    setInterval(function(){
        var _new = $window.scrollTop();
        if (old == 0 && _new > 0){
            $fixed.css({opacity:0.1});
        }
        else if (old > 0 && _new == 0){
            $fixed.css({opacity:1});
        }
        old = _new;
    }, 50);                
})()

演示

于 2013-02-28T17:20:01.240 回答