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

Posted 2023-03-06

【中文标题】当它到达固定导航时，仅淡出 div 的顶部

【英文标题】：Fade only top part of div out as it reaches fixed navigation

【发布时间】：2014-03-25 13:12:26

【问题描述】：

我正在尝试淡化我的内容的顶部，因为它到达具有半透明背景的固定导航栏。我已经让它有点工作了，但你会看到 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/

【参考方案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);

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

【讨论】：

为了避免性能下降，你有没有关于如何淡化元素而不淡化它们被放置的整个容器的建议？当页面顶部点击导航栏时，它们通常仍会在页面底部读取内容。

@BHOLT 完成。编辑。请注意if(secPos<fadeAt)，这将阻止我们的脚本查找* 位置高于“我们感兴趣的值”的部分的所有后代元素。 + 我为您添加了一种方法来处理从哪里开始淡化元素以及在哪里（顶部位置）结束（零）不透明度。

【参考方案2】：

我修改了你的代码：

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

    );
);

http://jsfiddle.net/x5JKC/3/

编辑除数 (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);
        );
);

【讨论】：

这几乎可以做到。有些地方我需要选择比下一层更深的地方，所以children() 一次清除所有内容而不是一个元素。我尝试用find() 替换它，但没有得到任何结果。更新了 JS Fiddle 以重新创建正在发生的事情：jsfiddle.net/x5JKC/6

这对我来说并没有什么不同。它仍在一次清除所有内部元素。

哈抱歉，没看懂你最后的评论。您希望所有项目在内容的任何深度都自行消失？

是的，如果可能的话。我试图解决的问题是，有时会显示内容的上半部分，但不会显示下半部分。即：一张高大的照片。底部应仍为不透明度 1，而顶部为 0。

好的，我改变了我的方法并使用了在文本上向下生长的渐变（透明颜色），看看红色容器。 jsfiddle.net/x5JKC/11