將元素粘貼到瀏覽器窗口/容器底部

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