我使用以下jQuery创建了粘性导航:
jQuery(document).ready(function () {
var top = jQuery('#card').offset().top;
jQuery(window).scroll(function (event) {
var y = jQuery(this).scrollTop();
if (window.matchMedia("(min-width: 700px)").matches) {
if (y >= top)
jQuery('#card').addClass('fixed'),
jQuery('#card').removeClass('fl-row-fixed-width');
else
jQuery('#card').removeClass('fixed'),
jQuery('#card').addClass('fl-row-fixed-width');
jQuery('#card').width(jQuery('#card').parent().width());
}
else {
if (y >= top)
jQuery('#card').addClass('fixed'),
jQuery('#card').removeClass('fl-row-fixed-width'),
jQuery('.fl-node-5bdadb6d18e4a').hide(),
jQuery('.fl-node-5bdadb6d18ec9').hide();
else
jQuery('#card').removeClass('fixed'),
jQuery('#card').addClass('fl-row-fixed-width'),
jQuery('.fl-node-5bdadb6d18e4a').show(),
jQuery('.fl-node-5bdadb6d18ec9').show();
jQuery('#card').width(jQuery('#card').parent().width());
}});
});
和CSS:
.fixed {
position:fixed;
top:0;
z-index:1000;
-webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,.15);
box-shadow: 0 0 30px 0 rgba(0,0,0,.15);
}
效果很好,但是,当我滚动并到达要固定的导航时,页面会跳转...
可以帮忙吗?