Javascript 如何使顶部的大图像变小并最终粘贴到顶部?
我想把我的网站分为两部分:一部分是包含一个大图片的标题,另一部分是包含其他图片、文本等的主要部分 当我滚动页面时,页眉上的大图像应该与主体一起滚动。在某一点上,图像应该是固定的,主体部分在其后面滚动 我尝试过一些不同的方法,但我不能得到正确的组合位置,显示,顶部等工作 这是迄今为止我得到的最接近的结果: HTML CSS 但滚动/固定位置之间的转换仍然存在小故障。如果左边的菜单(浅蓝色)可以粘在一起,那就太好了!(可能还有其他问题?删除Javascript 如何使顶部的大图像变小并最终粘贴到顶部?,javascript,html,css,sticky,Javascript,Html,Css,Sticky,我想把我的网站分为两部分:一部分是包含一个大图片的标题,另一部分是包含其他图片、文本等的主要部分 当我滚动页面时,页眉上的大图像应该与主体一起滚动。在某一点上,图像应该是固定的,主体部分在其后面滚动 我尝试过一些不同的方法,但我不能得到正确的组合位置,显示,顶部等工作 这是迄今为止我得到的最接近的结果: HTML CSS 但滚动/固定位置之间的转换仍然存在小故障。如果左边的菜单(浅蓝色)可以粘在一起,那就太好了!(可能还有其他问题?删除 min-height:1500px; div高度将保持在
min-height:1500px;
div高度将保持在1500px;
试试这个
.bottom {
display:flex;
background:#CFC;
}
这应该行得通
添加
页边距顶部:200px代码>在
滚动部分。我将您的小提琴更新为以下内容:
不更改HTML
Javascript
与使用javascript更改css不同,您可以添加一个类,然后让其他内容在该类存在时以不同的方式进行操作。例如,当激活时,顶部是固定的,但您也可以在底部添加一个与顶部高度相等的边距顶部,并将左侧菜单设置为固定。如果我稍后有时间,而您仍在努力,我将提供更多帮助:)@JoeLissner更改对象类比更改CSS属性更快?@JoeLissner您可以添加一个工作的JSFIDLE示例吗?您可以使用jQuery吗?如果不是,也没什么大不了的,只是简单一点:好吧,不管怎样,它都不是完美的,但是请告诉我这是否是你想要的。至少应该让你知道你需要做什么。我不能让它工作。如果您能提供一个JSFIDLE工作示例,那就太好了。
html, body {
margin:0;
}
body {
overflow-y:scroll;
overflow-x:hidden;
}
img {
display:block;
}
.top {
background:#FCC;
display:block;
top:0;
}
.bottom {
display:flex;
min-height:1500px;
background:#CFC;
}
.menu {
width:100px;
background:#CCF;
}
min-height:1500px;
.bottom {
display:flex;
background:#CFC;
}
<body onscroll='scroll(event)'>
<div class='top' id='top'><img src='http://www.vejanomapa.net.br/wp-content/uploads/2013/03/Maria-Fuma%C3%A7a-em-Tiradentes-MG.jpg'></div>
<div class='bottom' id='bottom'>
<div class='menu'>Menu</div>
<div class='main'><img src='http://tvulavras.com.br/wp-content/uploads/2017/04/maria-fuma%C3%A7a.jpg'></div>
</div>
</body>
html, body {
margin:0;
}
body {
overflow-y:scroll;
overflow-x:hidden;
}
img {
display:block;
}
.top {
background:#FCC;
display:block;
top:0;
}
/* start new rules */
.active{
position: fixed;
}
.active ~ .bottom {
margin-top: 386px;
padding-left: 100px;
}
.active ~ .bottom .menu {
position: fixed;
top: 200px;
bottom: 0;
left: 0;
}
/* end new rules */
.bottom {
display:flex;
min-height:1500px;
background:#CFC;
}
.menu {
min-width:100px;
background:#CCF;
}
function scroll(e) {
var T = document.getElementById('top');
var B = document.getElementById('bottom');
var imgH = T.clientHeight; // header image height
var hH = 200; // fixed header height
if (imgH-e.pageY > hH) { // image is scrolling
T.classList.remove('active') // remove class active as applicable
T.style.top = '-'+e.pageY+'px';
T.style.position = 'sticky';
B.style['margin-top'] = '0';
} else { // image should remain fixed
T.classList.add('active') // add class active as applicable
T.style.top = '-'+(imgH-hH)+'px';
}
}