gpt4 book ai didi

html - 即使向右滚动,如何使 div 跨越页面的 100%

转载 作者:行者123 更新时间:2023-11-28 02:38:12 25 4
gpt4 key购买 nike

这可能已经在某个地方得到了回答,但我找不到好的解决方案。我想创建一个标题,它的行为类似于一个 div,它是 position:absolute 在向下滚动时它将停留在页面顶部的意义上。虽然,我也希望用户能够左右滚动并让标题保持其 100% 的视口(viewport)宽度。现在,使用绝对位置,标题右侧会变成一个空白区域,如图所示。如何创建一个标题,它在从右向左滚动时保持 100% 的宽度,但在仅使用 css 向下滚动时也保持在页面顶部?

enter image description here

最佳答案

导航栏:使其成为position:fixed

内容宽度为 300%如 fiddle 所示。

编辑

通过添加 JQuery,我能够获得所需的输出。

  1. 您可以左右滚动内容,将导航栏保持在原位。
  2. 当您垂直滚动时,导航栏会消失。就像一个普通的网页。

$(window).scroll({
previousTop: 0
},
function() {
var currentTop = $(window).scrollTop();
if (currentTop <= this.previousTop) {
$(".header").show();
} else {
$(".header").hide();
}
this.previousTop = currentTop;
});
body {
margin: 0;
height: 700px;
}

h1 {
margin: 0;
position: relative;
top: 20%;
}

.header {
position: fixed;
margin: 0;
height: 30px;
width: 100%;
background-color: red;
}

.content {
background-color: blue;
height: 100%;
width: 400%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
<div class='header'></div>
<div class='content'>
<h1 style="color:white">Scroll Right</h1>
<h1 style="color:red; background-color:yellow; left:100%;">Scroll Right</h1>
<h1 style="color:gree; left:200%;">Scroll Right</h1>

</div>
</body>

关于html - 即使向右滚动,如何使 div 跨越页面的 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47311126/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com