Javascript 获取标题的高度,并在滚动到标题之外时显示顶部导航
目前,我有这个脚本。700的值是经过反复试验后确定的Javascript 获取标题的高度,并在滚动到标题之外时显示顶部导航,javascript,jquery,html,css,Javascript,Jquery,Html,Css,目前,我有这个脚本。700的值是经过反复试验后确定的 $(window).scroll(function () { if ($(window).scrollTop() > 700) { $('#top_nav').slideDown("slow"); } else{ $('#top_nav').slideUp("fast"); } }); 我的顶部导航是固定的,显示设置为无 div#top_nav { width:
$(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");
}
});