Question

Please help. I’m losing sleep over this one! 🙂

I have a list of short posts; call them quotes if you will. I have a fixed position header that is 200px high with a transparent background. I need the header visible for each and every post that the user scrolls through (hence the fixed positioning), and I’d like the read posts to disappear (or lower substantially in opacity) when they are scrolled up and behind the header; an inverse of “lazyload” with a 200px pad, if you will. Of course if the user scrolls the opposite direction to have the post back in the viewport (and below the header), I need it to reappear.

I’m fairly new with jQuery so please bear with me. I’ve searched extensively for help and hints but no fix yet. Your help is sincerely appreciated!

Mockup:

Test Page

jQuery:

$(document).ready(function(){

  var headerheight = $('#header').height();
  var scrollposition = $(window).scrollTop();

    $(window).scroll(function(){

        var offset = .offset();

        $('li').each(function() {

            if(scrollposition <= $(this)offset.top-headerheight){

            // 
            $(this).fadeOut(400);
            // 

            } else {

            //
            $(this).fadeIn(400);
            //

            }
        });
    });
});

Answer 1

Got it. Used this plugin: http://imakewebthings.github.com/jquery-waypoints/