Làm mờ hiệu ứng cuộn

Question

Tôi đã thêm tập lệnh mà tôi đã tìm thấy tại đây. Nó hoạt động một điều trị. Tuy nhiên, tôi đã gặp khó khăn khi cố gắng áp dụng hiệu ứng mờ dần cho nó. Vào phút nó chỉ cắt ra.

script type="text/javascript"> 


    $(document).ready(function() { 


     $(window).scroll(function() { 
       var height = $('body').height(); 
       var scrollTop = $('body').scrollTop(); 
       var opacity = 1; 


       if(scrollTop > 400) { 
        opacity = 0; 
       } 

      $('.social').css('opacity', opacity); 
     }); 
    }); 
</script> 

EDIT: Tôi đã gắn nó và nó hoạt động. Cảm ơn rất nhiều người:

<script type="text/javascript"> 
$(window).scroll(function() { 
// The social div 
var $socialDiv = $('.social'); 

//Get scroll position of window 
var windowScroll = $(this).scrollTop(); 

//Slow scroll of social div and fade it out 
$socialDiv.css({ 
'margin-top' : - (windowScroll/3) + "px", 
'opacity' : 1 - (windowScroll/550) 
}); 
}); 
</script>​ 

Answer 1

Bạn nên sử dụng .animate() hoặc .fadeTo() để có hiệu lực.

Sử dụng .css('opacity', opacity); sẽ làm cho yếu tố của bạn biến mất đột ngột.