0

I am trying to have one div stack on top of another on scroll. Right now, the second div opacity is set to 0 and once the bottom of the second div is reached, opacity becomes 1. How can I adjust this so that opacity becomes 1 when scroll reaches the top of the div instead? 

 $(document).ready(function() {

    /* Every time the window is scrolled ... */
    $(window).scroll( function(){

        /* Check the location of each desired element */
        $('#thrillercontainer').each( function(i){

            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();

            /* If the object is completely visible in the window, fade it it */
            if( bottom_of_window > bottom_of_object ){

                $(this).animate({'opacity':'1'},100);
                $('#horrorcontainer').slideUp(100);

            }
user1667057
  • 51
  • 1
  • 2
  • 10
  • try to make this question more specified.Add a screenshot if possible – Kaidul Oct 08 '12 at 01:44
  • I'm just wondering if this continues on from the same issue as your previous question? http://stackoverflow.com/questions/12771281/overlay-divs-on-scroll/12772493 You seem to have taken a different approach to one I suggested there, which could also be modified slightly to achieve what you wish here as well. – amustill Oct 08 '12 at 02:32
  • amustill-- going with your example, I have a slider that is 690px above the first panel. How can I alter your code so that the panels overlay beneath the slider and not at the top of the page? – user1667057 Oct 08 '12 at 03:13
  • If I'm honest, your structure and general UI pattern sounds a little confusing. Could you perhaps show some kind of example of the design and desired outcome? – amustill Oct 08 '12 at 13:22
  • I've got it working now, thank you. I am just trying to set each div to fill any screen size. I tried min-height:100% and width:100 height 100% but things get really messy. Not sure how to work it out – user1667057 Oct 08 '12 at 16:16
  • When I set the panels to min-height:100%; The content in the inner panels escapes-- this fiddle shows a little of what I am talking about http://jsfiddle.net/wQQEM/3/ – user1667057 Oct 08 '12 at 16:21

0 Answers0