Sticking element to the bottom of the browser window/container

Question

UPDATE - Answered my own question, check it lower.

I need to stick an element to the bottom of the browser window ( position: fixed; bottom:0; ) until the end of the container is reached.

Basically, it is an image of a person, that is cut off at the bottom. Once I scroll enough in the page to see the person's image, and scroll down to the last pixel of that image, it should become sticky to the bottom, until the end of the container is reached.

Here is a jsfiddle of the content structure. https://jsfiddle.net/mdy41ens/2/

So here, there is the top content of the page, and when you scroll down, there is a kitten image on the left. Both the kitten and the text is in the ".container". So while you scroll the page down to read all the text, the kitten image should stay fixed at the bottom of the browser window, until the end of the container is reached, and then its simply position: absolute; bottom:0; position: absolute; bottom:0; or something like that (stuck to the bottom of the container, not the browser anymore).

I found lots of examples of code helping do the opposite - sticking the element to the top of the screen, once the top of the browser window meets the top of the element being stickied.

<div class="container">
    <div class="imgContainer">
        <img src="http://upshout.com/wp-content/uploads/2015/06/dwarf-kitten-01.jpg" />
    </div>
    <div class="contentContainer">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet eget massa sit amet feugiat. In et nisi sagittis, condimentum leo vitae, congue purus. Aliquam nec malesuada odio, non varius orci. Suspendisse luctus ipsum a odio tristique tempus at at ante. Duis auctor lacus arcu, ut consequat libero fringilla sed. Ut in dapibus purus. Vivamus posuere sapien ut ex semper, ut pharetra nunc mollis. Vestibulum suscipit ipsum massa, a pharetra leo accumsan vel. Praesent varius ornare scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin vel ligula quis dolor malesuada pulvinar at id magna. Nulla pretium erat ante. Cras fringilla ut nulla quis rutrum. Quisque eget ex auctor tortor varius tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam auctor tincidunt fermentum.</p>
        <p>Suspendisse tincidunt ac urna nec ultrices. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed risus orci, volutpat a nisl in, posuere blandit augue. Quisque nec dictum metus. Donec quam orci, vestibulum vitae erat vel, sodales consectetur dolor. Morbi sed leo sit amet nibh hendrerit ornare. Ut ac malesuada risus. Ut congue lorem ut justo accumsan, vel dignissim turpis varius.</p>
        <p>Vivamus et neque mauris. Fusce pulvinar pretium dui, quis auctor mi suscipit ut. Nam et turpis et purus posuere fermentum at ac libero. In sagittis aliquet urna, nec dapibus lorem convallis iaculis. Aliquam a suscipit sapien. Quisque eget velit quis ex placerat auctor. In sodales libero non viverra vehicula. Maecenas pellentesque lacinia pretium. Nam iaculis nunc tincidunt purus scelerisque, quis sodales nunc faucibus. Phasellus semper aliquet tristique. Pellentesque nec leo a sapien gravida maximus. Pellentesque non pellentesque eros. Quisque gravida tortor sed nibh tincidunt varius. In finibus facilisis congue. Nam posuere dui orci, et consequat ipsum pretium ut.</p>
        <p>Aenean commodo nisi et dapibus iaculis. Mauris mollis accumsan massa. Aliquam lectus enim, dictum eu dapibus vitae, feugiat non libero. Cras ac sapien euismod, facilisis justo vitae, accumsan metus. Aenean ultricies blandit ipsum nec semper. Vestibulum imperdiet enim convallis elit iaculis sollicitudin. Donec commodo, tortor vitae imperdiet dictum, dui purus elementum sem, vel rhoncus nisi felis vel nulla. Ut a massa id velit porta tincidunt at vel nunc. Sed vel eleifend nunc, a efficitur enim. Mauris quis odio id eros feugiat blandit nec eget velit. Nam sed magna eu tellus porta maximus sed eu ligula.</p>
    </div>
</div>

Answer 1

Forgive the fact that this is choppy. I'm going to leave all the fancy styling to you, but this gives you the idea. (I put the image on the right for now because getting the text to stay on the right with the image on the left wold require another div and some styling for it, and there is a space between the image and the bottom container which comes from some padding or something somewhere. Trivial really.)

You can use JQuery to monitor the location of the scroll and once you have reached the bottom of the window, set a different style to the image such that it becomes position: fixed; and bottom: 0;

The real magic here is the JQuery.

JQuery

$(document).ready(function () {

    $(window).scroll(function () {
            var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
        if (scrollBottom < 400) {
            $('.imgContainerScrolling').addClass('imgContainerAtBottom');           
        } else {
                $('.imgContainerScrolling').removeClass('imgContainerAtBottom');
        }
    });
});

JSFiddle

Answer 2

EDIT

I think this solution is very close to the result you're expect. It needs some CSS and script adjustment to make it fully fluid and clean but you've got here a way to do it.

See it here

JS

$(function(){
    topKitten = $('.imgContainer').offset().top;
  topKittenHeight = $('.imgContainer').height();
  topContainer = $('.contentContainer').offset().top;
  bottomContainer = $(document).height() - topContainer - 2*topKittenHeight ;
  $(window).scroll(function(){
    windowScroll = $(window).scrollTop();
    if(windowScroll > topKitten + 220 && windowScroll < bottomContainer){
        $('.imgContainer').addClass('fixed').removeClass('bottom');
    }else if (windowScroll > bottomContainer){
        $('.imgContainer').removeClass('fixed').addClass('bottom');
    }else{          $('.imgContainer').removeClass('fixed').removeClass('bottom');
    }
  });
});

CSS

.container { overflow: hidden; width: 100%; position: relative;  }
.imgContainer.fixed { position: fixed; width: 45%; top: 100%; transition: all 0.5s; margin-top: -220px;}
.imgContainer.bottom { position: absolute; top: 100%; margin-top: -220px; transition: all 0.5s;}
.imgContainer { position: absolute; top: auto; margin-top: 0; transition: all 0.5s;}

Answer 3

Ok, I figured it out with this code. It can be more beautiful, but at least it works well. Pat and Joe are parts of an interactive slider. If Pat is selected, Pat's onscroll events get triggered, if Joe - Joes, if other slider members, then nothing gets triggered, because only these two images are smaller (height wise) than the text on the side, therefore you dont need to sticky other images to the bottom, because they are already at the bottom.

.stickit has fixed css styling to stick to the bottom of the browser window.

.stickit-end has absolute css styling to stick to the bottom of the container.

The content is dynamic, so I need to recalculate the heights of elements on scroll, rather than on page load. I hope this helps someone.

  $(function(){
    var topImage = $('.slayerItemPicture').offset().top;
  var topImageHeight = $('.slayerItemPicture').height();
  var scrollBottom = topImage - $(window).height() + topImageHeight;
    var bottomContainer = $("#CULTURE").offset().top - $(window).height();
  $(window).scroll(function(){
    if ($(".Joe").hasClass("activeItem")) {
            $('.Pat .slayerItemPicture').removeClass('stickit-end');
      $('.Pat .slayerItemPicture').removeClass('stickit');
      topImageHeight = $('.Joe .slayerItemPicture').height();
    scrollBottom = topImage - $(window).height() + topImageHeight;
    windowScroll = $(window).scrollTop();
      bottomContainer = $("#CULTURE").offset().top - $(window).height();
    if(windowScroll > scrollBottom && windowScroll < bottomContainer){
        $('.Joe .slayerItemPicture').addClass('stickit');
      $('.Joe .slayerItemPicture').removeClass('stickit-end');
    }
      else if (windowScroll >= bottomContainer) {
      $('.Joe .slayerItemPicture').removeClass('stickit');
      $('.Joe .slayerItemPicture').addClass('stickit-end');
      }
      else {
      $('.Joe .slayerItemPicture').removeClass('stickit-end');
      $('.Joe .slayerItemPicture').removeClass('stickit');
    }
    }
    else if ($(".Pat").hasClass("activeItem")) {
            $('.Joe .slayerItemPicture').removeClass('stickit-end');
      $('.Joe .slayerItemPicture').removeClass('stickit');
      topImageHeight = $('.Pat .slayerItemPicture').height();
    scrollBottom = topImage - $(window).height() + topImageHeight;
    windowScroll = $(window).scrollTop();
      bottomContainer = $("#CULTURE").offset().top - $(window).height();
    if(windowScroll > scrollBottom && windowScroll < bottomContainer){
        $('.Pat .slayerItemPicture').addClass('stickit');
      $('.Pat .slayerItemPicture').removeClass('stickit-end');
    }
      else if (windowScroll >= bottomContainer) {
      $('.Pat .slayerItemPicture').removeClass('stickit');
      $('.Pat .slayerItemPicture').addClass('stickit-end');
      }
      else {
      $('.Pat .slayerItemPicture').removeClass('stickit-end');
      $('.Pat .slayerItemPicture').removeClass('stickit');
    }
    }
    else {
        $('.Joe .slayerItemPicture').removeClass('stickit-end');
  $('.Joe .slayerItemPicture').removeClass('stickit');
  $('.Pat .slayerItemPicture').removeClass('stickit-end');
  $('.Pat .slayerItemPicture').removeClass('stickit');
    }

  });
});