html - 位置“粘性”在 ReactJS 应用程序中不起作用,并且在父级中没有指定“溢出”属性
问题描述
我正在构建一个 React 应用程序,但position: sticky
我的story-header
元素有问题。我已经检查了父样式并且没有overflow: hidden
属性值。
HTML
<div className='StoryList' >
<div className='story-header'></div>
</div>
CSS - 样式表
.App {
width: 100%;
overflow: visible;
}
.StoryList {
position: relative;
margin: 0;
width: 100%;
}
.story-header {
width: 100%;
top: -20px;
height: 50px;
left: 0;
background-color: lightgray;
position: sticky;
z-index: 1;
}
为什么story-header
滑到上面?
解决方案
我不确定我是否正确理解了您,但它可以正常工作。我已经在纯 html/css 中尝试过它并且它正在工作。检查我的代码,伙计:
.App {
width: 100%;
height: 200vh;
overflow: visible;
}
.StoryList {
background: #000;
height: 40vh;
position: fixed; // you can comment it out, I'm not sure what would you like to have
margin: 0;
width: 100%;
}
.story-header {
width: 100%;
top: -20px;
height: 50px;
left: 0;
background-color: lightgray;
position: sticky;
z-index: 1;
}
检查两个版本 - 有固定位置和没有它。
推荐阅读
- socket.io - 如何在 socket.io 中轻松更改房间?
- jquery - Rails 6 (and possible Ajax?) How to add a form question when a certain dropdown selection is selected
- excel - 来自文件夹命名范围问题的 PowerQuery 数据
- html - div 的 HTML 值相互依赖
- vue.js - 单击模态OK按钮时如何从另一个组件提交表单(bootstrap vue)
- react-native - Spokestack 是否支持 React-Native?
- mysql - 使用 MYSQL 进行 SQL 查询
- c - SCHED_DEADLINE 运行时溢出信号 (SIGXCPU)
- javascript - NodeJs 加密密钥创建(google kms 密钥导入) NodeJs
- java - How to get range to first index when the loop reach end?