使用fullpagejs在固定元素上滚动
Scrolling with fullpagejs over fixed elements
我正在尝试用fullpage.js设计一个网站,该网站包含覆盖部分屏幕的固定元素。问题是,当鼠标在这些固定元素上时,滚动无法正常工作(参见jsfiddle示例)
这是我的html:
<div class="hider" style="top: 0"></div>
<div id="fullpage">
<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
</div>
<div class="hider" style="bottom: 0"></div>
这是我的css:
body {
text-align: center;
}
.section {
font-size: 32px;
background-color: #b3d4fc;
}
.hider {
width: 100%;
height: calc(50% - 20px);
background-color: #3461ff;
position: fixed;
z-index: 1;
}
我希望鼠标在固定元素上滚动,智能手机或平板电脑用手指在固定div上上上下滑动。我该怎么做?
只需将固定元素放在整页div中,它就可以工作了。
<div id="fullpage">
<div class="hider" style="top: 0"></div>
<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
<div class="hider" style="bottom: 0"></div>
</div>
相关文章:
- 指示禁用元素滚动行为并改为滚动页面
- 在某个点停止固定元素滚动
- jQuery 航点在元素滚动到视图中时添加类
- 到达(窗口)上的中间元素.滚动
- 当元素滚动出屏幕时更改元素位置
- jQuery-将元素滚动到屏幕中间,而不是使用锚链接滚动到顶部
- 我想为一个元素添加一个事件监听器,当相应的元素滚动到视图中时,该监听器就会被激发
- 将元素滚动到页面底部的视图中
- fadeIn元素滚动
- 当光标到达底部时,有没有办法防止contentEditable元素滚动
- 固定元素滚动到Div
- 如何平滑地防止固定元素滚动经过指定元素
- 将所有HTML元素滚动到视图中
- 如果浏览器窗口高度为X,并且元素滚动到其中的X点,则合并条件
- 使用isroll4将最后一个元素滚动到第一个元素的开始位置
- 如何显示单独的锂元素滚动基于窗口的高度
- 根据所单击的元素滚动到页面上的相同位置
- 元素滚动的同时滚动另一个
- 修改jQuery.ScrollTo插件将元素滚动到页面中心(垂直/水平)或尽可能靠近中心
- 我如何检测一个元素滚动到视窗