Question

我正试图淡化我的内容的顶部，因为它到达具有半透明背景的固定导航栏。我有点工作，但你会看到2个问题：

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

我很感激任何帮助！感谢

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

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

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

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

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

2 个答案: