0

我正在开发一个单页 wordpress 网站。因为它是单页的，所以我使用 jQuery scrollTop 为菜单设置动画。当我单击带有 div id 的相应菜单链接时，我想转到特定的 div。当前的问题是固定位置的菜单选项卡正在穿过内容。它显示在 div 内容上（视口问题）。

我想在此菜单选项卡和 div 内容之间留出空隙，以使内容完全可见。

用于滚动效果的jQuery代码如下：

$(document).ready(function() {

    $('a[href=#welcome]').click(function(){

     $('html, body').animate({scrollTop:$('#welcome').position().top}, 'slow');

     return false;

    });



});


$(document).ready(function() {

  $('a[href=#aboutus]').click(function(){
     $('html, body').animate({scrollTop:$('#aboutus').position().top}, 'slow');

     return false;

  });

});

我需要的是在上面 div 的顶部位置“.position().top}”上添加一些值，例如 200px，以便我可以滚动到 div 顶部以下的位置...

编辑：“对不起，伙计们......我在上述要求中犯了一个错误......我必须从 div 的顶部位置减去一个值，以便我可以滚动到 div 顶部上方的位置......”


我怎样才能解决这个问题？任何帮助将不胜感激..

提前致谢..

4

2 回答 2

1

可以获取菜单的高度，例如：

var menuHeight = $('#mainMenu').height();

当您在线滚动时：

$('html, body').animate({scrollTop:$('#aboutus').position().top}, 'slow');

你减去菜单高度：

$('html, body').animate({scrollTop:$('#aboutus').position().top-menuHeight}, 'slow');

未经测试，但我认为它应该工作。基本上，您说滚动到您的 div 位置，但滚动到该位置之前的位置，即菜单高度。

于 2013-02-27T23:39:40.207 回答
1

我不确定我是否完全理解，但您可以将 200（因为它以 px 为单位）添加到您的位置。 

$(document).ready(function() {
  var marginTop = 200;  // add or remove or even grab the position of another element

   $('a[href=#aboutus]').click(function(){
       $('html, body').animate({scrollTop:$('#aboutus').position().top + marginTop}, 'slow');
         return false;
   });
});
于 2013-02-27T23:39:49.713 回答