javascript - 滚动后将元素固定到底部

Question

我有一个反向滚动的网站

<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 在标尺部分的底部垂直对齐 - 如何在用户向上滚动时将其固定到页面底部，使其始终可见？

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

Answer 1

当窗口向上滚动元素时，您可以向currentheight 元素添加一个“fixed”类。您需要获取窗口的高度和元素的底部偏移量。你可以这样实现:

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/