0
我的導航欄正常工作,因爲它應該。它最初位於頁面底部,當您滾動瀏覽頁面時,粘貼到頁面頂部。不過,我希望它比頁面底部高出75px。所以你可以看到下面的一些內容。這裏是我的代碼(我的猜測是,因爲我用窗口的高度它不會讓我補充-'75px」的代碼)JQuery導航欄粘在底部而不是以上
$(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>
嗨,謝謝你回到我身邊。當我嘗試頂層菜單不再粘在屏幕的頂部時...我嘗試使用-'75px',但是因爲我得到了一個沒有撇號的語法錯誤 – mackswel
你試過用$('。topmenu' ).css({stickyBot - 75)+'px' –
如果函數 –