所以有我的纳维尔码。我想在菜单上从顶部滑下来时做黑色背景,我可以这样做吗?我试图在.shrink类中的CSS中做某事,但没有改变。您还可以建议我在滑动时如何更改navbar中的徽标位置?我会在图片中向您展示我希望它看起来像。
https://ibb.co/cch08rd-这是图片,因此占位符是徽标在Navbar中的位置。我希望它像我试图绘制的那样滑动时要降低,并且在徽标上我想显示菜单图片 - 类似这3行。我也很累,画了我希望它的宽度。
$(window).on('scroll', function() {
if ($(window).scrollTop()) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
.background {
background-image: url('../images/img1-header.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 650px;
width: 100%;
}
#siteNav {
width: 100%;
top: 0;
left: 0;
transition: 0.3s;
display: flex;
flex-direction: row;
justify-content: center;
padding-top: 20px;
padding-bottom: 20px;
}
.shrink {
background: rgba(32, 32, 32);
height: 50px;
position: fixed;
}
.shrink .logo {
transition: 0.3s;
display: flex;
height: 38px;
}
#siteNav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
#siteNav ul li {
list-style: none;
border-right: 1px solid #fafafa;
padding-top: 10px;
}
#siteNav ul li a {
padding: 0 30px;
text-decoration: none;
transition: 0.3s;
color: #000000;
}
#siteNav ul li:last-child {
border-right: none;
}
header h1 {
text-align: center;
font-family: 'Homenaje', sans-serif;
color: #000000;
font-size: 58px;
padding-top: 130px;
letter-spacing: 3px;
}
header h1 a {
color: #383838;
}
<div class="background">
<nav id="siteNav">
<img class="logo" src="http://placehold.it/40" alt="">
<ul>
<li><a href="#mission">MISSION</a></li>
<li><a href="#clients">CLIENTS</a></li>
<li><a href="#products">PRODUCTS</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</nav>
<header>
<div>
<h1>aaaaaaa <br><a>aaaaaaaaa</a></br>
</h1>
</div>
</header>
</div>
function sticktothetop() {
var window_top = $(window).scrollTop();
var top = $('#stick-here').offset().top;
if (window_top > top) {
$('#stickThis').addClass('stick');
$('#stick-here').height($('#stickThis').outerHeight());
} else {
$('#stickThis').removeClass('stick');
$('#stick-here').height(0);
}
}
$(function() {
$(window).scroll(sticktothetop);
sticktothetop();
});
#stickThis {
padding: 20px;
background-color: #ccc;
font-size: 1.5em;
width: 100%;
text-align: center;
font-weight: bold;
}
#stickThis.stick {
margin-top: 0;
padding: 5px;
position: fixed;
top: 0;
text-align: left;
z-index: 9999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="stick-here"></div>
<div id="stickThis">Sticky note</div>
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
我刚刚测试了您的代码,它对我有用。它在滚动时更改了导航的背景。
在您的嵌入式代码中,我看到以下错误:
未介绍的参考文献:$未定义
这是因为您没有在HTML文档中引用/包含jQuery。
对于滚动滚动的导航,只需在上面添加保证金顶。
对于卷轴上的映像/徽标重新位置,您可以将其重新放置:绝对(并从文档流中删除它),如果您想保持NAV链接,然后将其重新放置按照您的意愿将其移动。