Geek Answers Handbook

Element overlaps other scrolls

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

I get a plugin or code snippet that does the following:

Two container elements per page, both heights are determined by the content. They cannot be fixed elements, as there is content to scroll. What I need is to scroll and go to the second element, it scrolls over the first content. I have no idea how to code this, but I made two jsFiddles. One that has the desired effect, but with fixed elements, and then ready to go.

Hope you guys can help.

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

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

Cheers r

+4
source share
5 answers

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

When the bottom of the first div is at the bottom of the window, start moving the second div up the first. This does not actually move the second compared to the first, but it moves the first down to give the same look. There is a case to make sure that the first div will not move down with the scrollbar, which will lead to an infinite scrollbar when the first div is higher than the second.

:

$(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'});
        }
    }
});

, - document.body.scrollTop, Chrome, .

+2

, CSS. , . , : http://jsfiddle.net/m7b7nzjc/7/

CSS, :

    body{
        margin: 0px;
    }


(http://jsfiddle.net/m7b7nzjc/7/), div div .

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

... -... DIV .

, divs z-, . , div "" div . , div.

http://jsfiddle.net/m7b7nzjc/5/

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

- ? ( )

$(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.com/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>
Hide result

, WIP, , , .

0

, , .

, 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")
    });
})

:

  • position: relative,
  • JavaScript, .
  • top: 0, JavaScript
  • Track scroll event (window if the body is a container, otherwise a container) and just move the first container down.

Jsfiddle

Sorry, if I answered incorrectly, perhaps this was due to a misunderstanding of your difficult task.

0
source

More articles:


All Articles