I've searched high and low and all over the internet for an answer/example but haven't seemed to find anything... but I'm sure it exists.

I'm after either a plugin or code snippet that does the following:

Two container elements on a page, both heights are determined by it's contents. These cannot be fixed elements as there is content to scroll through. What I'm after is upon scrolling and reaching the second element, it scrolls up OVER the first content. I haven't any idea of how to code this, really, but what I have done is produced two jsFiddles. One that has the desired effect but with fixed elements, and then one ready to be worked on.

I hope you guys can help.

$('.second-container').appear();
$(document.body).on('appear', '.second-container', function() {
    alert('appears');
});

/ (fixed example) / (ready to be used and has jquery.appear)

Cheers, R

I've searched high and low and all over the internet for an answer/example but haven't seemed to find anything... but I'm sure it exists.

I'm after either a plugin or code snippet that does the following:

Two container elements on a page, both heights are determined by it's contents. These cannot be fixed elements as there is content to scroll through. What I'm after is upon scrolling and reaching the second element, it scrolls up OVER the first content. I haven't any idea of how to code this, really, but what I have done is produced two jsFiddles. One that has the desired effect but with fixed elements, and then one ready to be worked on.

I hope you guys can help.

$('.second-container').appear();
$(document.body).on('appear', '.second-container', function() {
    alert('appears');
});

http://jsfiddle/m7b7nzjc/1/ (fixed example) http://jsfiddle/m7b7nzjc/ (ready to be used and has jquery.appear)

Cheers, R

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jan 31, 2015 at 8:46 John the PainterJohn the Painter 2,61588 gold badges6464 silver badges105105 bronze badges 2

• What browser? Either it works as expected in my ones or I just don't understand the question. – Markus Kottländer Commented Feb 4, 2015 at 20:19
• I remend you look at and adopt skrollr-stylesheets: github./Prinzhorn/skrollr-stylesheets .. you can also review skrollr as well.. – Brett Caswell Commented Feb 4, 2015 at 20:42

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2 +100

I think this is what you are looking for: http://jsfiddle/94xjdnqx/2/

When the bottom of the first div is at the bottom of the window, start moving the second div up over the first one. This doesn't actually move the second up over the first, but it moves the first down to give the same look. There is a case to make sure the first div doesn't keep moving down with the scrollbar, which would cause an infinite scrollbar when the first div is taller than the second.

The main logic is here:

$(document).scroll(function() {
    var viewBottom = document.body.scrollTop + $(window).height();
    if (viewBottom > $('.first-container').height())
    {
        var offset = viewBottom - $('.first-container').height()

        if (offset <= $(window).height())
        {
            $('.first-container').css({top: offset + 'px'});
        }
    }
});

I'm not sure how cross-browser patible document.body.scrollTop is, I'm using Chrome and it works.

Interesting... I read that a different way... That you wanted the second DIV to snap over the first.

I did mine by positioning the two divs as absolute and changing the z-index when the appear callback fires. This causes the blue div to "snap" over the red div when you scroll down. When you scroll back up, you still see the blue div.

http://jsfiddle/m7b7nzjc/5/

$(document.body).on('appear', '.second-container', function() {
    $('.second-container').css('z-index', '2');
});

To get the second element to scroll on top of the other element you were only missing a bit of CSS. The problem that was causing the space on the left hand side of the page as the bodies margin. If you look at this fiddle you'll see the corrected margin: http://jsfiddle/m7b7nzjc/7/

CSS that I added:

    body{
        margin: 0px;
    }

Update

I have updated my fiddle (http://jsfiddle/m7b7nzjc/7/) to programmaticly scroll the second div on top of the first div after the user has scrolled pass a threshold.

var hasScrolled = false;

$(document).on('scroll', function() {
    var secondDivTop = $(".second-container").position().top;
    var scrollPos = $(document).scrollTop();

    if(scrollPos <= secondDivTop && !hasScrolled){
        $('html, body').animate({
        scrollTop: $(".second-container").offset().top}, 300);
        hasScrolled = true;
    }    
});

How about something like this? (The min-heights and the left positioning were added just illustrate)

$(document).on('scroll', function(event) {
  // Check if the element is on the page based on offset
  if (($('.second-container').offset().top - $(window).height()) < $(document).scrollTop()) {
    $('.second-container').css('position', 'relative');
    $('.second-container').css('top',
      $('.first-container').height() - $(window).height() - $(document).scrollTop()
    );
    $('.first-container').css('top',
      $(document).scrollTop() - $(window).height()
    );
  } else {
    // Reset postions if you scroll back up
    $('.first-container').css('top', 0);
    $('.second-container').css('top', 0);
  }
});

.first-container {
  position: relative;
  background: red;
  top: 0;
  min-height: 800px;
}
.second-container {
  background: blue;
  position: relative;
  left: 30px;
  top: 0px;
  min-height: 400px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first-container">Aenean viverra rhoncus pede. Vestibulum eu odio. Maecenas egestas arcu quis ligula mattis placerat. Cras id dui. Suspendisse eu ligula. Praesent nonummy mi in odio. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor
  urna a orci. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Nam eget dui. Morbi mattis
  ullamcorper velit. Morbi vestibulum volutpat enim. Integer tincidunt. Praesent ut ligula non mi varius sagittis. Praesent congue erat at massa. Sed libero. Fusce vel dui. Donec vitae orci sed dolor rutrum auctor. Donec mi odio, faucibus at, scelerisque
  quis, convallis in, nisi. Duis vel nibh at velit scelerisque suscipit. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Phasellus accumsan cursus velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
  egestas. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Phasellus gravida semper nisi.
</div>
<div class="second-container">

</div>

of course this is a WIP, there's a lot more you'll probably need to polish off.

Interesting question, especially I am wondering what would be another content on the page and how you are going to make all this work together at all.

Well, HTML:

<div class="first-container"></div>
<div class="second-container"></div>

CSS:

body {
    position: relative;
    padding: 0;
    margin: 0
}

.first-container {
    background: red;
    height: 1200px;
    width: 100%;
    position: absolute;
    top: 0;
}
.second-container {
    background: blue;
    height: 1200px;
    width: 99%;
    position: absolute;
    right: 0
}

JavaScript:

$(function(){
    var height1 = $(".first-container").outerHeight(),
        height2 = $(".first-container").outerHeight()

    $(document.body).css("min-height",height1 + "px")
    $(".second-container").css("top",height1 + "px")

    $(window).scroll(function() {
        var scroll = $(window).scrollTop()

        if (scroll <= height1) $(".first-container").css("top",$(window).scrollTop() + "px");
        else  $(".first-container").css("top",height1 + "px")
    });
})

In short about important things:

1. Container is set to position: relative to allow both containers be absolutely positioned
2. Container min-height is set up by JavaScript to always keep the scrolling on the same maximum point
3. First container is set to top: 0, second container is set right after the first one with JavaScript
4. Track scroll event (window if the body is container, otherwise the container) and simply move the first container down.

JSFiddle

Sorry if I did answer wrong, probably it happened because of misunderstanding of your plex task.