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

你可以添加一个类＆＃34;固定＆＃34;当窗口向上滚动元素时，到currentheight元素。您需要获取窗口的高度和元素的底部偏移量。你可以这样做：

CSS：

ng-class="{'has-error': userFormRow['service-' + $index].$invalid }"

JS：

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

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;
}

滚动后将元素固定到底部

3 个答案: