向我的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滚动功能添加淡入淡出效果？

回答

相关问题