javascript - 为什么我无法更改幻灯片导航栏背景的宽度?
问题描述
所以有我的导航栏代码。我想在菜单上制作黑色背景,同时从顶部向下滑动一点,我可以这样做吗?我试图用 .shrink 类的宽度在 css 中做一些事情,但它什么也没改变。您还可以建议我如何在向下滑动时更改导航栏中徽标的位置?我将在图片中向您展示我希望它的外观。
https://ibb.co/cCh08RD - 这是图片,所以占位符是导航栏中徽标的位置。我希望它在滑动时降低,就像我试图绘制它一样,在徽标的位置我想显示菜单图片 - 类似于这 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 />
推荐阅读
- azure-devops - Azure DevOps 中的 TFVC 是否会自动将签入评论写入工作项的讨论?
- mongodb - 字段名称不为空的字段名称的 MongoExport
- node.js - Heroku npm start 从不同的位置开始
- python - Pandas:为什么使用 .loc 进行系列索引在第一次运行时会花费 100 倍的时间?
- python - 最大高度不超过111
- c - 如何将 char 指针转换为小写
- r - 更改 coefplot.glm() 中的系数名称
- c++ - VSCODE 通过代理在远程服务器上运行 gdb
- azure - Azure Monitor 是自定义应用程序性能监控的好地方吗
- java - 有界类型参数 - 是否包括上限?