将元素粘贴到浏览器窗口/容器底部

Question

UPDATE - 回答我自己的问题，检查它的更低。

我需要将一个元素粘贴到浏览器窗口的底部（position: fixed; bottom:0;），直到到达容器的末端。

基本上，它是一个人的形象，是在底部切断。 一旦我在页面中滚动到足以看到人的图像，并向下滚动到该图像的最后一个像素，它应该会粘到底部，直到达到容器的末端。

这是一个jsfiddle的内容结构。 https://jsfiddle.net/mdy41ens/2/

所以这里是页面的顶部内容，当你向下滚动时，左边有一个小猫图片。小猫和文本都在“.container”中。因此，当您向下滚动页面以读取所有文本时，小猫图像应该保持固定在浏览器窗口的底部，直到达到容器的末端，然后它的简单position: absolute; bottom:0;或类似的东西（粘到底部的容器，而不是浏览器了）。

我发现了很多帮助做相反事情的代码示例 - 一旦浏览器窗口的顶部遇到被粘贴的元素的顶部，将元素粘贴到屏幕的顶部。

<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

好吧，我使用此代码想通了。 它可以更漂亮，但至少它运作良好。 Pat和Joe是交互式滑块的一部分。如果选择了Pat，则Pat的onscroll事件会被触发，如果Joe - Joes，如果其他滑块成员没有被触发，因为只有这两个图像比侧面的文字小（高度明智），因此您不需要粘性其他图像的底部，因为它们已经在底部。

.stickit具有固定的CSS样式来坚持浏览器窗口的底部。

.stickit-end具有绝对css样式来坚持容器的底部。

内容是动态的，所以我需要重新计算滚动元素的高度，而不是页面加载。我希望这可以帮助别人。

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

    }); 
}); 

Answer 2

编辑

我认为这个解决方案是非常接近你所期望的结果。它需要一些CSS和脚本的调整，使其完全流畅和干净，但你有办法做到这一点。

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

原谅的事实，这是波涛汹涌。我将把所有的花式风格留给你，但是这给了你这个想法。 （我现在把图像放在右边，因为让文字留在右边，左边的图像需要另一个div和一些样式，并且图像和来自底部容器之间有一个空格）

您可以使用JQuery来监视滚动的位置，并且一旦您到达窗口的底部，为图像设置不同的样式，使其变为position: fixed;和bottom: 0;

这里真正的魔力就是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