2013-04-25 36 views
0

固定的菜单我见过几个Q &上,但我似乎无法得到任何人在我的情况下工作,如:jQuery Smooth Page Anchor Transitions with position:fixed menu
:(滚动锚+调整在顶部

页面示例:http://fpco-site.squarespace.com/familylife

当您向下滚动页面时,主菜单将粘贴/修复到顶部,还有一个与固定菜单相关联的下拉菜单(在页面中可能还有其他地方)。常规链接以及锚链接。当锚点链接被点击时,菜单&下拉菜单中的内容在修复时被掩盖d位置。

我需要跳转到锚点以适应菜单和打开时的下拉菜单。对于内容在滚动到锚点时以及在下拉菜单打开和关闭时向上和向下滚动进行动画上下移动都是理想的。

万一它很重要,我的锚在整个页面都通过jquery添加。

我尝试以下,但有一些错误的代码,打破我的下拉菜单:

/* scrollTo */ 
    function scrollTo(id){ 
     $('html,body').animate({scrollTop: $(id).offset().top},'slow'); 
    }; 
    $('a[href^="#"]').click(function(){ 
     scrollTo($(this).attr('href')); 
     return false; 
    }); 

我想如果我能得到那个工作,然后,然后我可以在添加在附加offest工作帐户的菜单,然后尝试抵消下拉打开/关闭。但我无法得到这个第一个想法工作....

回答

0

我能够解决这个在我的情况通过使用一些CSS重新定位我的锚点。在我的情况下,锚不适用于任何视觉元素,所以我可以移动它们而不会伤害任何东西。我用:

.anchor { 
position: relative; 
top: -160px; 
height: 1px; 
display: block; 

}

我还告诉下拉被点击下拉一个锚链接时关闭。这样我就不必担心下拉是打开还是关闭。

,现在当我点击进入其中一个锚点是排队的权利在我的固定菜单顶部:) 有可能是一个更好的办法,但是这对我的作品!〜

下一步看看我是否可以让它动画滚动到锚点而不是跳到它。这将是很好:)