基础 6,粘性菜单和画布外位置固定
Foundation 6, Sticky menu and offcanvas Position Fixing
目前正在使用Foundation 6 Off canvas和基本的html
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
Menu off canv
</div>
<div class="off-canvas-content" data-off-canvas-content>
<div class="top-bar-container" data-sticky-container>
<div class="sticky" data-options="marginTop:0;" data-sticky data-sticky-on="small" style="width:100%;">
<div class="top-bar">
<div class="row column">
columns content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
这里的问题是当用户滚动然后单击offcanvas菜单时,它们会被带到顶部(与基金会的文档相同),当他们再次向下滚动时,粘性菜单表现得非常有趣。
此外,当用户滚动时,Offcanvas 菜单不会粘在一边,这也是基金会文档所做的。
我注意到切换时,大包装器上有一个打开的类,它执行 css 翻译 x这就是打破绝对位置的粘性的原因。
当我将该类切换为左边距时:-250px;一切恢复正常。
我在网上寻找,但找不到任何相关的内容,并且想知道这只是我的 html 结构不连贯还是真的是一个错误。
<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right" data-force-top="false">
这可以防止在按钮操作上滚动到顶部。
.off-canvas.position-right { position:fixed; right:-250px; top:0; z-index:1; transition:0.5s ease; }
.is-open-right .off-canvas.position-right { right:-0px; }
.admin-bar .off-canvas.position-right { top:32px; }
.off-canvas { background-color: transparent; }
.is-open-right { -webkit-transform: initial; transform: initial; margin-left: -250px; }
.off-canvas-wrapper-inner { transition: margin 0.5s ease; }
.sticky.is-stuck { left:0px !important; transition:0.5s; }
.is-open-right .sticky.is-stuck { left:-250px !important; }
我的 CSS 重组以使用好的旧边距负数。
这些变化使它看起来就像它以前一样。
相关文章:
- jquery试图按名称获取按钮位置
- 我可以获得相对于被点击元素的确切点击位置吗
- 谷歌地图固定位置覆盖
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 我可以更改剑道UI网格吗's的外键值
- 循环比赛位置算法
- 除修剪外的其他功能
- ng视图外的链接重定向到ng视图内的页面
- 一个html/javascript'小工具'知道用户何时单击了小部件外的任意位置
- 基础 6,粘性菜单和画布外位置固定
- 使用CSS从相对静态位置编辑画布外的基本侧边栏
- 旋转木马外的导航控件 - 祖尔布基金会轨道
- $('html').click()..除一个元素外的任何位置
- 从像素值外推像素位置
- Javascript:单击正文中除其中一个元素外的任何位置
- 打开一个弹出窗口并在用户单击弹出窗口外的任何位置时将其隐藏
- 捕获浏览器窗口外的鼠标位置
- 除了使用绝对位置或固定位置外,还有其他方法使用CSS来使元素不影响页面的流程吗?
- 如何在函数外使用HTML5访问纬度和经度地理位置
- 如何计算一个元素在屏幕外的位置