JQuery导航栏粘在底部而不是以上

Question

我的导航栏正常工作，因为它应该。它最初位于页面底部，当您滚动浏览页面时，粘贴到页面顶部。不过，我希望它比页面底部高出75px。所以你可以看到下面的一些内容。这里是我的代码（我的猜测是，因为我用窗口的高度它不会让我补充-'75px”的代码）

$(document).ready(function() { 
 
    var windowH = $(window).height(); 
 
    var stickToBot = windowH - $('.topmenu').outerHeight(true); 
 

 
    $('.topmenu').css({ 
 
    'top': stickToBot + 'px' 
 
    }); 
 

 
    $(window).scroll(function() { 
 
    var scrollVal = $(this).scrollTop(); 
 
    if (scrollVal > stickToBot) { 
 
     $('.topmenu').css({ 
 
     'position': 'fixed', 
 
     'top': '0px' 
 
     }); 
 
    } else { 
 
     $('.topmenu').css({ 
 
     'position': 'absolute', 
 
     'top': stickToBot + 'px' 
 
     }); 
 
    } 
 
    }); 
 
});

#wholesite { 
 
    min-height: 100%; 
 
    position: absolute; 
 
} 
 
#header { 
 
    position: relative; 
 
    height: 500px; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    background-color: #000100; 
 
} 
 
video { 
 
    position: absolute; 
 
    margin: 0 auto; 
 
    height: 500px; 
 
    width: 100%; 
 
} 
 
.videocontainer { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    height: 500px; 
 
    width: 100% 
 
} 
 
.topmenu { 
 
    height: 75px; 
 
    width: 100%; 
 
    background-color: #fff; 
 
    display: block; 
 
    z-index: 10; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
 

 
<div id="wholesite"> 
 
    <div id="header"> 
 
    <div class="videocontainer"> 
 
     <video width="auto" height="500px" autoplay> 
 
     <source src="lbsedited.mp4" type="video/mp4"> 
 
      Your browser does not support the video tag. 
 
     </video> 
 
    </div> 
 
    <div> 
 
     <nav> 
 
     <ul class="topmenu"> 
 
      <li><a href="player_representation.html">- SERVICES -</a> 
 
      </li> 
 
      <li><a href="financial_advice.html">- FINANCIAL ADVICE -</a> 
 
      </li> 
 
      <li> 
 
      <a href="index.html"> 
 
       <img src="textonly.jpg" alt="" height="71" width="87"> 
 
      </a> 
 
      </li> 
 
      <li><a href="property_managment.html">- PROPERTY MANAGEMENT -</a> 
 
      </li> 
 
      <li><a href="testimonials.html">- TESTIMONIALS -</a> 
 
      </li> 
 
     </ul> 
 
     </nav> 
 
    </div> 
 
    </div> 
 

 
    <div class="mainpage"> 
 
    <div class="title"> 
 
     <h1> About Us </h1>

Answer 1

在当您添加-75px正在计算窗口高度

var windowH = $(window).height() -75px;