ScrollTop出现页边距问题

Question

I am trying to use the scrolltop function but it stops 67 pixels from the top of the window... 我正在尝试使用scrolltop功能，但它从窗口顶部停止67个像素...

i have a 67 pixel margin set to offset the navbar which sits above a full screen banner image. 我设置了67个像素的边距，以抵消位于全屏横幅图像上方的导航栏。 The navbar is also a little transparent and so the margin is needed, as follows... 导航栏也有点透明，因此需要空白，如下所示...

body {
  margin-top: 67px;
}

and the following script... 和以下脚本...

<script>
$(document).ready(function(){
   $(".navbar a, footer a[href='#MyPage']").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      },900, function(){   
        window.location.hash = hash;
      });
    } // End if
  });
</script>

the body tag looks like this... 身体标签看起来像这样...

<body id="MyPage" data-spy="scroll" data-target=".navbar" data-offset="60">

The scroll works great but stops what I believe to be 67 pixels from the top of the page, seems obvious this is down to my margin to offset the depth of the navbar but how do I overcome this? 滚动效果很好，但是我认为距页面顶部的距离是67像素，这似乎很明显是我的不足以抵消导航栏的深度，但是我该如何克服呢？

I have tried adding +67 to the following line but this doesn't help... 我尝试将+67添加到以下行中，但这无济于事...

scrollTop: $(hash).offset().top+67

any ideas would be most welcome. 任何想法都将受到欢迎。

Thanks 谢谢

Answer 1

以下内容的确解决了我的问题，这要感谢Niet the Dark Absol

margin:0; padding-top:67px

ScrollTop出现页边距问题

问题描述

1 个解决方案

解决方案1
0 2018-04-25 14:37:30

ScrollTop出现页边距问题

问题描述

1 个解决方案

解决方案1 0 2018-04-25 14:37:30

解决方案1
0 2018-04-25 14:37:30