Bootstrap滚动问题

我为单个页面网站下载了响应式Wordpress主题。主题使用Bootstrap滚动导航。Bootstrap滚动问题

我对JQuery/JS很熟悉，但决不能胜任。

我击中的问题如下： -

我的主菜单包括了一些菜单选项。当访问者点击菜单选项时，引导程序将滚动到具有相应CSS ID的部分的顶部。滚动将顶部边距应用于元素，以避免滚动的部分的顶部部分隐藏在导航栏下。

导航栏点击由followinhg码处理： -

$('a.header').click(function() { 
    $('.navbar-collapse').collapse('hide'); 
    $('html, body').animate({ scrollTop:$('#header').offset().top - '60'}, 1000, 
     function() { 
     scrollingfn(); 
     }); 
    return false; 
    }); 

    $('a.service').click(function() { 
    $('.navbar-collapse').collapse('hide'); 
    $('html, body').animate({ scrollTop:$('#service').offset().top - '60'}, 1000, 
     function() { 
     scrollingfn(); 
     }); 
    return false; 
    }); 

    $('a.portfolio').click(function() { 
    $('.navbar-collapse').collapse('hide'); 
    $('html, body').animate({ scrollTop:$('#portfolio').offset().top - '60'}, 1000, 
     function() { 
     scrollingfn(); 
     }); 
    return false; 
    }); 

    $('a.testimonial').click(function() { 
    $('.navbar-collapse').collapse('hide'); 
    $('html, body').animate({ scrollTop:$('#testimonial').offset().top - '60'}, 1000, 
     function() { 
     scrollingfn(); 
     }); 
    return false; 
    }); 

    $('a.pricing').click(function() { 
    $('.navbar-collapse').collapse('hide'); 
    $('html, body').animate({ scrollTop:$('#pricing').offset().top - '60'}, 1000, 
     function() { 
     scrollingfn(); 
     }); 
    return false; 
    }); 

    $('a.aboutus').click(function() { 
    $('.navbar-collapse').collapse('hide'); 
    $('html, body').animate({ scrollTop:$('#aboutus').offset().top - '60'}, 1000, 
     function() { 
     scrollingfn(); 
     }); 
    return false; 
    }); 

$('a.team').click(function() { 
    $('.navbar-collapse').collapse('hide'); 
    $('html, body').animate({ scrollTop:$('#team').offset().top - '60'}, 1000, 
     function() { 
     scrollingfn(); 
     }); 
    return false; 
    }); 

$('a.contactus').click(function() { 
    $('.navbar-collapse').collapse('hide'); 
    $('html, body').animate({ scrollTop:$('#contactus').offset().top - '60'}, 1000, 
     function() { 
     scrollingfn(); 
     }); 
    return false; 
    });

和滚动事件被绑定到下面的代码： -

jQuery(window).bind('scroll', function() { 

    if (jQuery(window).scrollTop() > 100) { 

    jQuery('#headnev').addClass('navbar-fixed-top').removeClass('topnavbar'); 

    jQuery('body').addClass('bodytopmargin').removeClass('bodynomargin'); 

    } else { 

    jQuery('#headnev').removeClass('navbar-fixed-top').addClass('topnavbar'); 

    jQuery('body').removeClass('bodytopmargin').addClass('bodynomargin'); 

    }

}）;

在桌面上，滚动的工作方式与所有菜单选项一样。

但是，在iPhone（和其他小屏幕智能设备）上，当访问者点击“图库”菜单选项时，页面会显着滚动到“图库”部分的顶部，使得只有底部“画廊”部分的一部分可以在屏幕上看到。如果访问者下次再次点击“图库”菜单选项，页面会滚动到它应该到达的位置，即到“图库”部分的顶部。如果访客下一次点击“主页”菜单选项，该页面应该滚动至页面顶部，但如果访问者点击“图库”菜单选项，该页面将再次滚动显示在“图库”部分的顶部之外。这种行为也适用于点击任何主菜单选项。

此外，如果访问者首先加载页面，然后单击“图库”菜单选项，页面会显着滚动到“图库”部分的顶部之外。如果访问者下一次点击“主页”菜单选项以外的任何菜单选项，则页面会正确滚动到所选部分的顶部。只有当访问者点击“主页”菜单选项，然后点击任何其他菜单选项时，页面才会滚动到所选部分的顶部。

任何有关这个问题的帮助将不胜感激。

来源

2014-06-06 Ian Ryan

请忽略我上面的帖子。 2天后，我把头发拉出来，现在我发现问题不是由Bootstrap引起的。

主题自定义CSS应用样式到导航问题的导航栏容器。

考虑解决此问题。

来源

2014-06-06 13:26:46

Bootstrap滚动问题

回答

相关问题