滚动时出现粘滞导航和页面跳转

时间:2018-11-03 22:28:33

标签: jquery css-position sticky scrolltop

我使用以下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);
}

效果很好,但是,当我滚动并到达要固定的导航时,页面会跳转...

可以帮忙吗?

0 个答案:

没有答案