Stickyfill 在 Safari 和 Firefox 中不起作用
Stickyfill not workiing in Safari and Firefox
我正在使用 stickyfill (https://github.com/wilddeer/stickyfill) 在滚动条上粘贴侧边栏菜单。
在 safari 和 Opera 上运行完美,但在 Safari 和 Firefox 上根本无法运行。有人可以帮我解决问题吗?
我使用的是最新版本的 Wordpress (4.6.1) 和 Bootstrap (3.3.7)。
网站url(查看左侧边栏菜单):HERE
JQ:
jQuery(document).ready(function($) {
$('#sidestick').Stickyfill();
});
CSS:
.sidestick {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 0;
}
.sidestick:before,
.sidestick:after {
content: '';
display: table;
}
.sidestick:after {
clear: both;
}
@media screen and (min-width: 768px){
.sticky-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
HTML:
<div id="content" class="site-content">
<div class="container">
<div class="row sticky-eq-height">
<div class="col-sm-3" >
<div id="sidestick" class="sidestick" style="top: 140px;">
Menu content
</div>
</div>
<div class="col-sm-9">
MAIN CONTENT
</div>
解决更改插件 StickyKit 的问题 (http://leafo.net/sticky-kit/)
我正在使用 stickyfill (https://github.com/wilddeer/stickyfill) 在滚动条上粘贴侧边栏菜单。
在 safari 和 Opera 上运行完美,但在 Safari 和 Firefox 上根本无法运行。有人可以帮我解决问题吗?
我使用的是最新版本的 Wordpress (4.6.1) 和 Bootstrap (3.3.7)。
网站url(查看左侧边栏菜单):HERE
JQ:
jQuery(document).ready(function($) {
$('#sidestick').Stickyfill();
});
CSS:
.sidestick {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 0;
}
.sidestick:before,
.sidestick:after {
content: '';
display: table;
}
.sidestick:after {
clear: both;
}
@media screen and (min-width: 768px){
.sticky-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
HTML:
<div id="content" class="site-content">
<div class="container">
<div class="row sticky-eq-height">
<div class="col-sm-3" >
<div id="sidestick" class="sidestick" style="top: 140px;">
Menu content
</div>
</div>
<div class="col-sm-9">
MAIN CONTENT
</div>
解决更改插件 StickyKit 的问题 (http://leafo.net/sticky-kit/)