javascript - 标题在视差滚动期间切断顶部图像
问题描述
我在我的网站上使用 JS 创建了一个固定的标题,但该标题现在切断了我的第一个图像的顶部。我也在使用视差滚动。这是我的代码:
这是HTML:
<head>
<div class="header" id="myHeader">
<h1>My Website</h1>
</div>
</head>
<body>
<div class="bgimg-1" ></div>
<script src="./js/headerScroll.js">
</script>
</body>
现在是 JS(headerScroll.js):
window.onscroll = function() {
myFunction()
};
let header = document.getElementById("myHeader");
let sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
最后是CSS:
.header {
padding: 10px 16px;
background: white;
color: black;
border: 1px solid black;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
.sticky+.content {
padding-top: 102px;
}
body,
html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
.bgimg-1 {
position: relative;
opacity: 0.65;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("../images/image1.jpg");
min-height: 100%;
}
有没有办法bgimg-1
降低,所以标题不会将其切断(或显示完整图像)?
解决方案
像这样?
window.onscroll = function() {
myFunction()
};
let header = document.getElementById("myHeader");
let sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
.header {
padding: 10px 16px;
background: white;
color: black;
border: 1px solid black;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
.sticky+.content {
padding-top: 102px;
}
body,
html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
.bgimg-1 {
position: relative;
opacity: 0.65;
background-position: top;
background-repeat: no-repeat;
background-size: contain;
background-image: url("https://www.howtogeek.com/wp-content/uploads/2019/08/img_5d5b215d04389.png");
min-height: 100%;
}
<div class="header" id="myHeader">
<h1>My Website</h1>
</div>
<div class="bgimg-1"></div>
推荐阅读
- react-hook-form - 如何在 react-hook-form 中使用 Draft-js-plugins
- javascript - 如何从reactjs中的选择输入中获取标题属性
- vba - 带有 whereCondition 的子表单打开表单
- css - Piranha CMS 和不同的 CSS 框架
- android - Xamarin Image 未从给定的本地计算机路径加载
- flutter - Flutter BlocBuilder 构建器仅在最初被调用并且不对状态更改做出反应
- dataweave - 如何使用 Dataweave 2.0 在另一个嵌套 JSON 对象中组合 JSON 对象
- powershell - 使用 powershell 将 office 365 与 mailchimp 同步时出现问题
- google-apps-script - 如果在单元格谷歌脚本中为“假”,则隐藏绘图
- youtube-api - YouTube 数据 API 未从“社区”标签返回评论