javascript - 当 div 到达固定导航时仅淡出顶部部分

Question

当内容到达具有半透明背景的固定导航栏时，我试图淡化内容的顶部。我已经可以正常工作了，但是您会看到两个问题:

1. 所有内容都会淡出，而不仅仅是接近固定导航的内容。内容应以逐行速率淡出。
2. 由于选择器类的原因，所有其他 div 的所有内容都会消失。

如果有任何帮助，我将不胜感激!谢谢

var divs = $('.section').children();
$(window).on('scroll', function() {
  var st = $(this).scrollTop();
  divs.css({ 'opacity' : (1 - st/20) });
});

JS Fiddle 到目前为止:http://jsfiddle.net/x5JKC/

Answer 1

LIVE DEMO

var $section = $('.section');
var $window = $(window);
var fadeAt = 150; // start fade ad Npx from top
var zeroAt = 50 ; // Npx from top = 0 opacity

function fadeByApproach(){
    var st = $window.scrollTop();
    $.each($section, function(idx, el){
        var secPos = $(el).offset().top - st;
        if(secPos<fadeAt){       // Ignores other sections
            var $ch = $('*', this); // all elements 
            $.each($ch, function(){
                var top = $(this).offset().top - st;
                if(top<fadeAt){  // Ignores other childrrens
                    var opa = (top-zeroAt)/(fadeAt-zeroAt)/1;
                    $(this).html("TOP: "+top +'<br> Current Opacity: '+ opa);
                    this.style.opacity = opa;
                }
            });
        }
    });
}

$(window).on('scroll load resize', fadeByApproach);

您可能希望在滚动时运行函数，但也希望在加载和窗口调整大小时运行函数，就像我一样。