Jquery 如何在页面的特定高度设置固定div的动画

HTML:

我想使div的不透明度在第一次向下滚动后等于0.1。 我在网上搜索过它，但不确定是否使用css或jquery来实现这一点

这是我的小提琴：

---

谢谢。

如果您使用CSS不透明度，您仍然需要javascript回退，以支持旧版IE中没有的功能。因此，我将使用CSS和javascript回退，或者只使用javascript

完全编辑

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

根据您的评论添加此JS：

$(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');
    }
});

这个CSS

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

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

为了确定您是否没有被滚动，我可以在hover语句中添加一个

scrollYpos

check，它也可以工作。也许更好，其实我不知道。然而，我认为这段代码更具可读性，而可能更长

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

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

---

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

$(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);
   }
});

---

为了扩展@Leeish的答案，最好使用

animate

属性，如下所示： 此外，添加

.stop

属性将防止排队的动画妨碍效果

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

---

演示：

你没有回答问题。我以为问题是：“我在网上搜索过，但不确定是否使用css或jquery来完成。”我会在5分钟内接受他的回答，上面说我不能在5分钟内接受答案minutes@Leeish我还有一个问题，如果我想要“修复”这个词悬停时的不透明度为1？我试图在jQuery上添加.mouseOver（），但它不起作用。如果您希望内容不不透明，则必须使用背景PNG。div本身是不透明的，因此其中的任何内容都必须是不透明的。如果你想得到你想要的效果，我会做一个小小的半透明png，悬停时，将不透明度设置为1，背景设置为png。另外，不使用上面的不透明度代码，只需使用它来设置背景png。然而，你刚才说的效果必须使用这两种方法，因为只使用png将产生非不透明内容，只是一个不透明的背景。这太棒了，谢谢@harryg，但现在我有一个额外的问题，如果我想让单词“fixed”的不透明度在悬停时恢复为1，即使它不在页面顶部。我想我必须在if语句中添加.mouseOver（）函数，但到目前为止它还不起作用。也许有点帮助？除了这是对的还是错的之外，计时器不会比将侦听器放在滚动事件上消耗更多的资源/内存吗？

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

$(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);
    }
});