javascript - 让 div 从底部开始
问题描述
这是我网站的测试图片。当前,当您向下滚动屏幕时,顶部的块会变大,但它来自顶部。我如何让它从底部升起?是不是跟offset有关?被div
调用stem
,底部div
被调用timeline
。
function showStem() {
var stemb = $(".stem-background");
var stem = $(".stem");
var timeline = $(".timeline");
var timelineot = timeline.offset().top;
var h = document.documentElement.clientHeight;
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > timelineot - h) {
stemb.hide();
stem.show();
stem.height(scroll + h - timelineot);
} else {
stemb.hide();
stem.hide();
}
});
}
.timeline {
background: #112C30;
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 15px;
line-height: 26px;
color: #B9CFD0;
overflow: hidden;
}
.timeline a {
color: #B9CFD0;
text-decoration: none;
border-bottom: 1px solid #B9CFD0;
}
.timeline h1, h2, h3, h4, h5, h6 {
font-family: 'Comfortaa', cursive;
}
.main-content {
margin: 0 auto;
position: relative;
}
.main-content .section-inner, .main-content .post-wrapper {
*zoom: 1;
}
.main-content .section-inner:before, .main-content .section-inner:after, .main-content .post-wrapper:before, .main-content .post-wrapper:after {
content: "";
display: table;
}
.main-content .section-inner:after, .main-content .post-wrapper:after {
clear: both;
}
.section .section-inner {
margin: 0 auto;
width: 1024px;
}
@media only screen {
.section .section-inner {
width: auto;
max-width: 1024px;
}
}
.stem-wrapper {
position: fixed;
top: 0;
bottom: 0;
left: 50%;
z-index: auto;
}
.stem-wrapper.color-yellow .stem-background {
background: #E9E566;
}
.stem-wrapper.color-green .stem-background {
background: #35C189;
}
.stem-wrapper.color-white .stem-background {
background: #FFF;
}
.stem-wrapper .stem, .stem-wrapper .stem-background {
position: absolute;
top: 0;
left: -30px;
width: 60px;
}
.stem-wrapper .stem{
background: #1e4f56;
overflow: hidden;
height: 100%;
}
.stem-wrapper .stem-background {
background: #ecf6f9;
height: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="timeline">
<div class="stem-wrapper">
<div class="stem"></div>
<div class="stem-background"></div>
</div>
<!-- more content -->
</div>
我在 CSS 中尝试了一些东西,但很多溢出都是多余的。
解决方案
我得到了我正在寻找的答案
stem.offset({top:timelineot});
timelineot+50
由and测试过timelineot-50
推荐阅读
- ruby-on-rails - 缓存的 Ruby Haml 块返回空
- css - 响应式 css 网格 - 如何使第一项 2 x 宽度和响应式
- javascript - 为什么在附加到文档时会忽略某些 keydown 事件?
- elasticsearch - 在 Windows 10 中哪里可以找到 Kibana 系统日志文件
- r - 如何创建标识行值更改的另一列的列?
- c++ - 如何在正在运行的代码中的任何地方暂停和恢复(使用用户输入)?
- python - 如何将 StandardScaler() 转换回数据框?
- java - InMemoryJavaCompiler 无法编译文件
- javascript - 为什么我在这里使用 TypeScript 得到“绑定元素‘存储’隐式具有‘任何’类型”?
- javascript - 如何从 Java Script 中的 Map 获取具有最大值的特定条目