到达固定导航时仅淡出div的顶部 [英] Fade only top part of div out as it reaches fixed navigation

问题描述

当内容到达顶部具有半透明背景的固定导航栏时，我正在尝试淡化其内容的顶部.我已经有点用了，但是您会看到2个问题:

I'm trying to fade the top part of my content as it reaches a fixed nav bar with a translucent background. I've got it somewhat working, but you'll see 2 problems:

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/

推荐答案

我对您的代码做了一些改动:

I changed a bit your code :

$(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以减小/增加效果.

Edit the divisor (20) or remove the +10 to reduce/increase the effect.

注释更改了隐藏元素的方法(在大元素上逐渐隐藏)，然后尝试使用渐变作为蒙版并随着滚动向下滚动:

Comment changed the approach to hiding elements (progressive hiding on big element), try then with a gradient acting as a mask and growing down with the scroll :

<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的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！