目前,我有这个脚本。 700的值是经过反复试验后放置的。
$(window).scroll(function () {
if ($(window).scrollTop() > 700) {
$('#top_nav').slideDown("slow");
}
else{
$('#top_nav').slideUp("fast");
}
});
我的顶部导航已固定,显示设置为无。
div#top_nav {
width: 100%;
z-index: 999;
opacity: 0.9;
border-bottom: 1px solid rgb(204, 204, 204);
box-shadow: 0 0 7px rgb(136, 136, 136);
position: fixed;
background-color: rgb(255, 255, 255);
display: none;
}
我的页眉具有以下样式。
#index header {
background-attachment: fixed;
background-image: url("../images/bg.jpg");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
}
马上,我就能看出问题所在。我必须手动调整 700 的值,因为标题的高度可能会发生变化。
我的问题是我将如何更改脚本,以便它获得标题的高度,可能包括边距和填充,这样当我滚动时,我的顶部导航向下滑动并显示。
目前它运行良好。唯一的问题是 700 的固定值。必须采用更加可变的方式来执行此操作。
最佳答案
var headerHeight = $('header').outerHeight();
$(window).scroll(function () {
if ($(window).scrollTop() > headerHeight) {
$('#top_nav').slideDown("slow");
}
else{
$('#top_nav').slideUp("fast");
}
});
编辑:Fiddle
关于javascript - 获取标题的高度并在滚动到标题之外时显示顶部导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23524114/