[英]How to add fixed toolbar snap.js
我在将固定的标头添加到snap.js时遇到了一些麻烦,这是我到目前为止所拥有的:
<div class="snap-drawers">
<div class="snap-drawer snap-drawer-left">
<div>
<h4>My App</h4>
<ul>
<li><a href="/#/">Nav 1</a></li>
<li><a href="/#/">Nav 2</a></li>
<li><a href="/#/">Nav 3</a></li>
</ul>
</div>
</div>
<div class="snap-drawer snap-drawer-right"></div>
</div>
<div id="content" class="snap-content">
<div style="height:1000px">
</div>
</div>
<div id="toolbar">
<div>
<a href="#" id="open-left"></a>
<h1>My Toolbar</h1>
</div>
<div id="navbar">
<h1>My Navbar</h1>
</div>
</div>
工作示例https://jsfiddle.net/2bg2jrs5/
按照这个问题https://github.com/jakiestfu/Snap.js/issues/47我只能通过将固定标头移出snap-content容器来使其工作。 但是现在,页眉不会与左侧抽屉的其余部分“同步”滑动(请参见示例)。
您只需要在#container
内部移动#toolbar
,如下所示:
<div id="content" class="snap-content">
<div id="toolbar">
<div>
<a href="#" id="open-left"></a>
<h1>My Toolbar</h1>
</div>
<div id="navbar">
<h1>My Navbar</h1>
</div>
</div>
<div style="height:1000px">
</div>
</div>
检查小提琴: https : //jsfiddle.net/ano8g6en/1/
原来,您需要将工具栏放置在快照内容容器的外部,以便将其实际固定在位置上。 然后的问题是工具栏不再与抽屉拖动,这在GitHub问题中得到了证实。 因此,我写了一些JS修补程序,根据需要将工具栏移入或移出快照内容容器。
var snapper = new Snap({
element: document.getElementById('content'),
disable: 'right',
hyperextensible: false
});
/* fixed header fix */
snapper.on('start', function () {
if (snapper.state().state !== "left")
document.getElementById('content').appendChild(document.getElementById('toolbar'));
});
snapper.on('animated', function () {
if (snapper.state().state !== "left")
document.getElementsByTagName('body')[0].appendChild(document.getElementById('toolbar'));
});
/* end fixed header fix */
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.