Javascript 当到达固定导航时，仅淡出div的顶部

当我的内容到达一个带有半透明背景的固定导航栏时，我试图淡出它的顶部。我已经让它工作了一些，但您会看到两个问题：

所有内容都会淡出，而不仅仅是接近固定导航的内容。内容应以逐行衰减的速度衰减。 由于选择器类，所有其他div的所有内容都会淡出。 我将感谢任何帮助！谢谢

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

---

JS Fiddle到目前为止：

我对您的代码做了一些更改：

$(window).on('scroll', function () {
    $('.section').each(function (index, item) {
        $(item).children().each(function (indexChild, child) {
            var st = $(window).scrollTop();
            st = $(window).scrollTop() - $(child).offset().top + 10;
            $(child).css({ 'opacity': (1 - st / 20) });
        });

    });
});

编辑除数20或删除+10以减少/增加效果

编辑：注释更改了隐藏元素的方法渐进式隐藏在大元素上，然后尝试使用渐变作为遮罩，并随着滚动向下生长：

<div class="section red">
    <div class="mask red"> </div>
    <h1>section headline</h1>
    <p>first paragraph</p>
    <p>second paragraph</p>
    <p>third paragraph</p>
</div>

.mask.red{
    position:absolute;
    width:100%;
    height:1px;
    background: -webkit-linear-gradient(red, rgba(255,0,0,0)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red, rgba(255,0,0,0)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, rgba(255,0,0,0)); /* For Firefox 3.6 to 15 */
   background: linear-gradient(red, rgba(255,0,0,0)); /* Standard syntax */
}

$(window).on('scroll', function () {
    $('.section .mask').each(function (index, item) {
            var heightMask = $(window).scrollTop() - $(item).offset().top+90;
        console.log(heightMask);
        $(item).css({height:heightMask});
        });
});

---

您可能希望在scroll上运行函数，但也可以在load和window resize上运行，就像我所做的那样。

这几乎可以做到。有些地方我需要选择更深一层的内容，所以孩子们一次清除所有内容，而不是一个元素。我试着用find替换它，但没有得到任何结果。更新了JS提琴来重现正在发生的事情：这对我来说没有任何不同。它仍然在一次清除所有的内部元素。哈，对不起，不明白你最后的评论。你们想让所有的内容在任何深度都自动褪色吗？是的，若可能的话。我试图回避的问题是，有时会显示内容的上半部分，但不会显示内容的下半部分。艾：一张高高的照片。底部应该仍然是不透明度1，而顶部是0。好的，我改变了我的方法，在文本透明颜色上使用了向下生长的渐变，看看红色容器。为了避免性能下降，您有没有建议如何使元素褪色而不使它们放置在其中的整个容器褪色？当页面顶部点击导航栏时，它们通常仍在向页面底部读取内容。@BHOLT done。编辑。请注意ifsecPos

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