Make a div float whenever the bottom of it goes out of view

Question

I'm able to add and remove classes that make a div float and unfloat, but I'm restricted to having to enter a scroll amount until the classes gets added.

What I'd like to have, is for the class to be added when the bottom of the div goes out of view, or past the viewport.

Likewise, for the class to be removed when the bottom of the div (in it's original place) can be seen again - although I'm not sure about this, as the div will always be visible now.. as it's being floated.

http://jsfiddle.net/r440tggy/

var header = $("#request-consultation");
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 750) {
        header.addClass("fixed-bottom-left");
    } else {
        header.removeClass("fixed-bottom-left");
    }
});

Answer 1

Getting the element position before the scroll event makes sure that rendering problems don't happen.

You just need to get the elements position from the top, add the height and do a check against that.

var header = $("#request-consultation");
var element = header.offset().top + header.outerHeight();
$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= element) {
    header.addClass("fixed-bottom-left");
  } else {
    header.removeClass("fixed-bottom-left");
  }
});

#request-consultation {
  float: right;
  width: 250px;
  border: 2px solid;
  padding: 10px;
  margin: 10px;
}
.fixed-bottom-left {
  float: none;
  position: fixed;
  bottom: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="request-consultation">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
    tincidunt blandit.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
  tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
  euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
  tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
  tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
  euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
  tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
  tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
  euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
  tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
  tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
  euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
  tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
  tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
  euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
  tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
  tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
  euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
  tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
  tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
  euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
  tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
  tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
  euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
  tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
  tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
  euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
  tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
  tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
  euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
  tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>