到达固定导航时仅淡入div的顶部

BHOLT 发表于 Dev

螺栓

我尝试淡化内容的顶部，使其到达具有半透明背景的固定导航栏。我有一些工作，但您会看到两个问题：

所有内容都会淡出，而不仅仅是固定导航的内容。内容应以逐行速率逐渐消失。
由于选择器类，所有其他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/

尤兹

我更改了您的代码：

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