向我的Div滾動功能添加淡入淡出效果？

-3

我已經設法讓div（s）堅持在頂部偏移64px的滾動，但我也希望相同的div的不透明度褪色爲0.我想不出如何添加這個？我到目前爲止所做的一個例子。向我的Div滾動功能添加淡入淡出效果？

$(window).scroll(function(){ 
    var scrollTop = $(this).scrollTop(); 
    $(".ComponentOne").css("top",Math.max(64,800-scrollTop)); 
});

來源

2017-06-03 Mark

添加一個'褪色（）（）'selector –

$（「。ComponentOne」）.css（「top」，Math.max（64,800-scrollTop））。fade（）; –

更新

試試下面的代碼：

jQuery的

$(window).scroll(function() { 
    var scrollTop = $(this).scrollTop(); 
    var offsetTop = $('.ComponentOne').position().top; 
    console.log(offsetTop); 
    $(".ComponentOne").css("top", Math.max(64, 800 - scrollTop)); 
    if (offsetTop === 64) { 
    $(".ComponentOne").css("opacity", "0"); 
    } else { 
    $(".ComponentOne").css("opacity", "1"); 
    } 
});

CSS個

.ComponentOne { 
    transition: opacity 500ms ease; 
    height: 100px; 
    background: #000; 
    position: fixed; 
    left: 0; 
    right: 0; 
}

來源

2017-06-03 16:03:47 Bhuwan

是的，我嘗試過，但它開始滾動而不是當「ComponentOne」達到64px的滾動頂部位置時，不透明度0淡出。 – Mark

我想要做的行爲是「ComponentOne」從800px的「頂部」位置以「不透明度」0開始。用戶向下滾動，當「ComponentOne」達到64px的「頂部」位置時，保持「固定」，然後淡入到「不透明度」0.如果用戶向上滾動，則所有內容都反向。 – Mark

正如我明白你的問題，我想你想這個。檢查更新的答案 – Bhuwan

CSS

.ComponentOne{ 
    height:100px; 
    width:200px; 
    background:pink; 
    position:absolute; 
    top:800px; 
    opacity:0; 
}

$("document").ready(function(){ 

    $(window).scroll(function(){ 
     var scrollTop = $(this).scrollTop(); 
     var compTop = $('.ComponentOne').offset().top; 

     var controllOpacity = 1400; 

     if(scrollTop + 100 > compTop) 
     { 
      $(".ComponentOne").css("top","64px"); 
      $(".ComponentOne").css("position","fixed"); 
      $(".ComponentOne").css("opacity", ((scrollTop - 800)/(controllOpacity - 800))); 

     } 
     if(scrollTop < 800){ 
      $(".ComponentOne").css("top","800px"); 
      $(".ComponentOne").css("position","absolute"); 
      $(".ComponentOne").css("opacity", ((scrollTop - 800)/(controllOpacity - 800))); 
     } 

    }); 

});

根據你只要調整controlOpacity變量的值。它用於控制div應該完全淡出的範圍。所以，如果你降低它的股利將很快淡出，你scoll，如果你把它大，那麼DIV會慢慢滾動

JSFiddle`後`的.css淡出的例子

來源

2017-06-03 16:32:15 Raj

再次感謝與上面相同的問題。是的，我嘗試過，但開始滾動而不是當「ComponentOne」達到64px的滾動頂部位置時，它開始褪色到不透明度0。 - 馬克9分鐘前 \t \t \t 我想要做的行爲是「ComponentOne」從「不透明度」0開始在800px的「頂部」位置。用戶向下滾動，當「ComponentOne」達到64px的「頂部」位置時是停留「固定」，然後淡化爲「不透明」0.如果用戶向上滾動，則所有內容都會反轉。 - 馬克5分鐘前 – Mark

檢查我編輯它的代碼。它爲我工作正確。嘗試一下。 – Raj

謝謝拉吉。很近！但是，如何讓不透明度由滾動條控制，而不僅僅是2秒的過渡淡出。 – Mark

向我的Div滾動功能添加淡入淡出效果？

回答

相關問題