Sticky Nav Top-Bar让页面跳下来(基础5)

时间:2015-05-20 20:39:40

标签: javascript html nav sticky zurb-foundation-5

我使用Foundation框架创建我的网页,并使用Sticky Top-Bar导航作为简单选择表单的容器。虽然我确实让它起作用,当我向下滚动页面并且Sticky Top-Bar捕捉到窗口的顶部时,页面内容的其余部分会跳过'下降约60px左右。我现在已经搞乱了大约3个小时而没有运气。

我非常感谢任何见解或建议,尤其是那些熟悉基金会的人。

Here's the link to the page in question...

谢谢!

2 个答案:

答案 0 :(得分:1)

基础粘性类的设计考虑了导航栏。导航栏的高度通常为45px,因此当它与粘性类绝对定位时,主体会获得具有相似高度的填充以补偿它。您可能想要摆弄.f-topbar-fixed的顶部填充,以便它不会在滚动时跳转。

答案 1 :(得分:0)

可以选择删除滚动顶部

<html>
<title>dropdownlist</title>
<head>
<script language="Javascript" type="text/javascript" >
function choix(formulaire)
{
var j;
var i = form1.boite1.selectedIndex;
if (i == 0)
for(j = 1; j <3; j++)
form1.boite2.options[j].text="";


else{
switch (i){
case 1 : var text = new Array( "London","Manchester","Birmingham");
break;
case 2 : var text = new Array("Paris","Marseille","Lyon");
break;

case 3 : var text = new Array("Berlin","Munich","Francfort");
break;
}

for(j = 0; j<3; j++)
form1.boite2.options[j+1].text=text[j];
}
form1.boite2.selectedIndex=0;
}
</script>
</head>
<body>
<form name="form1">
<select name="boite1" onChange="choix(this.form)">
<option selected>country</option>
<option>England</option>
<option>France</option>
<option>Germany</option>

</select>

<select name="boite2">
<option selected>cities</option>
<option></option>
<option></option>
<option></option>
</form>
</select>
</body>
</html>

来自这篇文章http://foundation.zurb.com/forum/posts/881-page-jumps-to-top-on-top-bar-hamburger-icon-click