Question

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

我熟悉JQuery / JS，但绝不胜任。

我遇到了以下问题： -

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

导航栏点击由以下代码处理： -

  $('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;
  });

并且scroll事件绑定到以下代码： -

 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（以及其他小屏幕智能设备）上，例如，当访问者点击＆＃34;图库＆＃34;菜单选项，页面滚动显着超出＆＃34;画廊＆＃34;部分只有＆＃34;画廊＆＃34;的底部。部分在屏幕上可见。如果访问者下次点击了＆＃34;图库＆＃34;菜单选项第二次，页面滚动到它应该的位置，即到＆＃34;画廊＆＃34;的顶部。部分。如果访问者接下来点击了＆＃34; Home＆＃34;菜单选项页面滚动到页面顶部，但如果访问者点击＆＃34;图库＆＃34;菜单选项页面再次滚动显示超出＆＃34;画廊＆＃34;部分。同样的行为适用于任何主菜单选项的点击。

此外，如果访问者首先加载页面，然后点击＆＃34;图库＆＃34;菜单选项，页面滚动显着超出＆＃34;画廊＆＃34;部分。如果访问者接下来点击除＆＃34; Home＆＃34;之外的任何菜单选项。菜单选项，然后页面正确滚动到所选部分的顶部。只有当访问者点击＆＃34; Home＆＃34;菜单选项，然后单击页面滚动到所选部分顶部之外的任何其他菜单选项。

非常感谢您对此问题的任何帮助。

Answer 1

请忽略我上面的帖子。在我拔头发2天后，我现在发现问题不是由Bootstrap的任何问题引起的。

主题自定义css将样式应用于导致问题的导航栏容器。

请考虑解决此问题。

Bootstrap滚动问题

1 个答案: