Fade only top part of div out as it reaches fixed navigation

问题

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:

All the content fades out, not just what's approaching the fixed nav. Content should fade at a line by line rate.
All the content for all the other divs fade about because of the selector class.

I'd appreciate any help! Thanks

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

JS Fiddle so far: http://jsfiddle.net/x5JKC/

回答1:

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/

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

Edit: 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});
        });
});

回答2:

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

You might want to run your function on scroll, but also on load and window resize, just like I did.

来源：https://stackoverflow.com/questions/21978184/fade-only-top-part-of-div-out-as-it-reaches-fixed-navigation

标签

javascript

jquery

scrollbar

opacity

fade