如何在頁面一定高度動畫定格

Question

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/

謝謝。

Answer 1

如果你使用CSS不透明度，你仍然需要一個javascript fallback來支持它在老版本的IE中不存在。所以我會去用CSS和JavaScript後備，或只是JavaScript。

FULL EDIT

$(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上方，仍然可能在頂部有點bug，但我沒有完成它，因爲我認爲其他方式更好。

$(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/

Answer 2

您可以使用定時器來檢查窗口滾動發生了變化，並根據需要設置不透明度。

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

DEMO

Answer 3

只是爲了擴大對@ 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/