javascript - 每当 div 的底部超出视野时，使 div float

Question

我可以添加和删除使 div float 和取消 float 的类，但在添加类之前我必须输入滚动量。

我想要的是，当 div 底部超出 View 或超出视口(viewport)时添加类。

同样，当可以再次看到 div 的底部(在它原来的位置)时要删除的类 - 虽然我不确定这一点，因为 div 现在总是可见的......因为它正在 float 。

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

在滚动事件之前获取元素位置可确保不会发生渲染问题。

您只需要从顶部获取元素位置，添加高度并对其进行检查。

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>