Javascript 使用时，内容在页面顶部的固定div下浮动http://www.appelsiini.net/ ：在视口中

我试图制作一个页面，每当一个新的部分有最多的焦点时，它的标题都会进入顶部的固定div。当我使用：in viewport函数时，内容也会上浮，并且不可见

$(document).ready(function () {
$("#navmenu").hide();
});
$(document).ready(function(){ 
$("#pull").click(function(){$("#navmenu").toggle();});
});
$(document).ready(function(){
$("#navmenu").click(function(){$("#navmenu").toggle();});
});

$(document).ready(function () {
$("#titleheader").hide();
});

$(document).scroll(function () {
/*$('.titl').hide();*/
if($('.bottomtitle').is(':in-viewport')){
$("#titleheader").hide();
} else {
$("#titleheader").show();   
}});

$(document).scroll(function () {
if($('.bottomtitle').is(':in-viewport'))
{
$(".mainthead").css({"position":"relative","margin-left":"0px"});
$('.lawnmaintenance').css("margin-top",'0em');
}
else if($('.lawnmaintenance').is(':in-viewport')){
if($('.bottomtitle').is(':in-viewport')==false){
$(".mainthead").css({"position":"fixed","top":"0px","margin-left":"4em","z-         
index":"102"});
$('.lawnmaintenance').css("margin-top",'10em');
}
}
else if($('.lawnmaintenance').is(':above-the-top'))
{
$(".mainthead").css({"position":"relative","margin-left":"0px"});
$('.lawnmaintenance').css("margin-top",'0em');
}
else {
$(".mainthead").css({"position":"relative","margin-left":"0px"});
$('.lawnmaintenance').css("margin-top",'0em');
}});

$(document).scroll(function()
{
if($('.shrub').is(':in-viewport')==false)
{
$(".treeshrub").css({"position":"static","margin-left":"0px"});
$('treediv').css('margin-top','0em');
}
else  if($('.treeshrub').is(':in-viewport'))
{
if($('.lawnmaintenance').is('.in-viewport')==false){
$(".treeshrub").css({"position":"fixed","top":"0px","left":"4em","z-        
index":"101"});
$('.treediv').css('margin-top','10em')}
}
else {
$(".treeshrub").css({"position":"static","margin-left":"0px"});
$('.treediv').css('margin-top','0em');
}}
);
</script>

$（文档）.ready（函数（）{
$（“#导航菜单”）.hide（）；
});
$（文档）.ready（函数（）{
$（“#拉”）。单击（函数（）{$（“#导航菜单”）。切换（）；}）；
});
$（文档）.ready（函数（）{
$（“#导航菜单”）。单击（函数（）{$（“#导航菜单”）。切换（）；}）；
});
$（文档）.ready（函数（）{
$（“#titleheader”）.hide（）；
});
$（文档）。滚动（函数（）{
/*$（'.titl'）.hide（）*/
如果（$（'.bottomtitle'）。是（':in-viewport'））{
$（“#titleheader”）.hide（）；
}否则{
$（“#titleheader”）.show（）；
}});
$（文档）。滚动（函数（）{
如果（$（'.bottomtitle'）。是（':in-viewport'））
{
$（“.mainthead”）.css（{“位置”：“相对”，“左边距”：“0px”}）；
$（'.lawnmaintenance'）.css（“页边空白顶部，'0em'）；
}
如果（$（'.lawnmaintenance'）.is（':in viewport'），则为else{
如果（$（'.bottomtitle'）。是（':in-viewport'）==false）{
$（“.mainthead”）.css（{“位置”：“固定”，“顶部”：“0px”，“左边距”：“4em”，“z-
索引“：“102”}）；
$（'.lawnmaintenance'）.css（“页边空白顶部，'10em'）；
}
}
如果（$（'.lawnmaintenance'）。是（':over the top'），则为else
{
$（“.mainthead”）.css（{“位置”：“相对”，“左边距”：“0px”}）；
$（'.lawnmaintenance'）.css（“页边空白顶部，'0em'）；
}
否则{
$（“.mainthead”）.css（{“位置”：“相对”，“左边距”：“0px”}）；
$（'.lawnmaintenance'）.css（“页边空白顶部，'0em'）；
}});
$（文档）。滚动（函数（）
{
如果（$（'.Shush'）。是（':in-viewport'）==false）
{
$（“.treeshrub”）.css（{“位置”：“静态”，“左边距”：“0px”}）；
$（'treediv'）.css（'margin-top'，'0em'）；
}
else如果（$（'.treeshrub'）。是（':in viewport'））
{
如果（$（'.lawnmaintenance'）.is（'.in viewport'）==false）{
$（“.treeshrub”）.css（{“位置”：“固定”，“顶部”：“0px”，“左侧”：“4em”，“z-
索引“：“101”}）；
$（'.treediv'）.css（'margin-top'，'10em'）}
}
否则{
$（“.treeshrub”）.css（{“位置”：“静态”，“左边距”：“0px”}）；
$（'.treediv'）.css（'margin-top'，'0em'）；
}}
);

html代码

木兰户外解决方案…北方景观维护和改善解决方案
亚特兰大地铁。。。
木兰户外景观
亚特兰大北部地铁的维护和改进服务
草坪养护
内容



树木和灌木护理
内容

<!--<div class="w3-container w3-theme-l3" id="navmenu" style="height: 100vh;     
width: 100vw; position: fixed; top: 0px; z-index:99; opacity: .8;">-->

<nav class="inset" id="navmenu">
<ul id="navul">
<li class="w3-container w3-theme-i4" id="navitem"><a href="#" 
id="nava">Home</a></li><br>
<li class="w3-container w3-theme-i4" id="navitem"><a href="#"  
id="nava">About</a></li><br>
<li class="w3-container w3-theme-i4" id="navitem"><a href="#"  
id="nava">Contact</a></li><br>
</ul>
</nav>

<!--</div>-->
<div class="w3-container w3-green" style="height: 2.5em; position:fixed;  
top: 0px; z-index: 100;">
<a href="#menu" id="pull"><img id="titlepic" src="images/menu.png"  
alt="Menu" style="height:2em; margin-top: 3px;"></a>
</div>
<header id="titleheader" class="w3-container w3-theme-l3 inset"   
style="height:5em; width: 100vw; padding-right: 1em; text-align: right;   
position: fixed; top: 0px; z-index: 99;"><h1 style="font-size: 1em; margin-  
right: 1em; "><b>Magnolia Outdoor Solutions...</b></h1><h2 style=" font-
size:  .75em;">Landscape maintenance and improvement solutions for North 
Metro  Atlanta...</h2></header>
<div class="w3-image inset w3-animate-bottom" style="margin-bottom: 5px;     
border-bottom: 5px solid white;"><img class="titl" id="titleimg"   
src="images/grass.jpg" style="width: 100%; max-height: 650px;">
<div class="w3-title w3-text-white bottomtitle" id="bottom-title"><header 
class="w3-container"><h1>Magnolia Outdoor Solutions</h1><h2>Landscape 
maintenance and improvement services for North Metro Atlanta</h2></header> 
</div>
</div>
<div class="w3-row lawnmaintenance" style="margin-top: 5px;">
<div class="w3-col " style="width:70%;">
<header class="w3-container w3-theme-l3 inset servheadleft mainthead"      
style="color:white;">
<h2>Lawn Maintenance</h2></header>
<div class="w3-container">
<p>content</p>
</div></div> 
<div class="w3-col" style="width: 30%;"> <img class="picr"    
src="images/landscape.jpg" style="width: 100%;"><img class="picr"  
src="images/zoysia.jpg" style="width: 100%;"><img class="picr"   
src="images/fescue2.jpg" style="width: 100%;"><img class="picr"  
src="images/edge.jpg" style="width: 100%;">
</div>
</div>
<br>
<div class="w3-row treediv">
<div class="w3-col" style="width: 30%;"> <img class="picl"      
src="images/bush1.jpg" style="width: 100%;"><img class="picl"  src=
"images/bushes.jpg" style="width: 100%;">
</div>
<div class="w3-col " style="width:70%;">
<header class="w3-container w3-theme-l3 inset servheadright treeshrub">
<h2>Tree & Shrub Care</h2></header>
<div class="w3-container">
<p class="shrub">content content</p>
</div></div> 
</div>