Фикс элемент вниз после того, как свиток

Question

У меня есть обратный скроллинг Webiste

<div class="end"></div> 
<div class="wrapper"> 
<div class="ruler"><div class="currentheight">asd</div></div> 
<div class="main"></div> 
<div class="content"> 

<div class="high" id="high"><img src="placeholder.png"></img><h3>1.9km – THIS HIGH! </h3></div> 
<div class="washington"><a id="washington" class="btn btn-2 btn-2c" href="#high">Keep Going</a><img src="placeholder.png"></img><h3>0.15km – Washington Monument </h3></div> 
<div class="spacer"></div> 

</div> 
</div> 

<div class="ep"> 
<a href="#washington" class="btn btn-2 btn-2c">START</a> 
<h1>Title</h1> 
<h2>content</h2> 
</div> 


$(function() { $('html, body').scrollTop($(document).height() - $(window).height());}); 

Элемент currentheight является verticaly выровненную в нижней части секции линейки - как зафиксировать его в нижней части страницы, когда пользователь прокручивается, так что он останется всегда видимым?

FIDDLE: https://jsfiddle.net/koteva/5ug7pkte/

Answer 1

Вы можете добавить класс «фиксированный» в currentheight элемента, когда окно прокручивается элемент вверх. Вам нужно получить высоту окна и нижнее смещение элемента. Вы можете достичь этого, как это:

CSS:

.currentheight.fixed {position:fixed;bottom:38px;left:0px;background:rgba(0,0,8,1);width:calc(33% - 42px);} 

JS:

//to start at bottom of page 
$(function() { $('html, body').scrollTop($(document).height() - $(window).height()); }); 

// Store the bottom offset of currentheight element so that we don't recalculate at every scroll event 
var elemBottomOffset; 

//scrolling animations 
$(document).ready(function() { 
    $('a[href^="#"]').on('click', function (e) { 
     e.preventDefault(); var target = this.hash; var $target = $(target); 
     $('html, body').stop().animate({ 'scrollTop': $target.offset().top }, 
     1200, 'easeInOutQuart', function() { window.location.hash = target; }); 
    }); 
    // Calculate the bottom offset of currentheight element only once 
    elemBottomOffset= $('.currentheight').offset().top + $('.currentheight').outerHeight(); 
}); 

$.fn.calc_height = function() { 

    var window_scroll_top = $(window).scrollTop(); 
    var window_scroll_top_cm = window_scroll_top * 0.026458333; 
    $('.currentheight').html(window_scroll_top_cm.toFixed(2) + ' cm'); 
    // Code to add fixed class based on window scrolling 
    if (window_scroll_top + $(window).height() < elemBottomOffset) 
     $('.currentheight').addClass('fixed'); 
    else 
     $('.currentheight').removeClass('fixed'); 
}; 

//counter that needs to be positioned 
$(function() { 
    $.fn.calc_height(); 
    $(window).bind('scroll', function() { 
     $.fn.calc_height(); 
    }); 
}); 

JSFiddle: https://jsfiddle.net/5ug7pkte/6/

Answer 2

что-то вроде этого?

https://jsfiddle.net/5ug7pkte/1/

.ruler{ 
    background:rgba(0,0,8,1); 
    position:fixed; // added 
} 

.main{background:rgba(0,0,0,0) url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQW9XmL6F5hmpPd8iwdBXJ4-UrProCpCnM6fcxhZFYvMy7FVX_JK6QDig') repeat-y scroll 0 0/8cm auto;height: 70470cm; 
    margin-left:257px; // added 
} 

Answer 3

меню делают фиксированные на дне и добавить отступ снизу тела и проверить here

body{ 
     padding-bottom: 300px; 
} 
.fixedBottom{ 
    position: fixed; 
    bottom: 0; 
}