html - 在导航栏下方的 div 中显示背景图像
问题描述
新手引导。
我想在in的
NavBar
内部显示背景图像。由于某种原因,下面代码中的图像没有呈现正确的高度。如何在保持图像响应能力的同时达到正确的高度?div
bootstrap
另外,我们如何改变
NavBar
滚动条的颜色?当我滚动时,下面的代码没有任何反应。
html:
<nav class="navbar navbar-expand-lg bg-secondary fixed-top text-uppercase" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top"> <img src="img/logo-clear.png" alt="logo" style="width:160px;"></a>
<button class="navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-2 px-0 px-lg-3 rounded js-scroll-trigger" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-2 px-0 px-lg-3 rounded js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-2 px-0 px-lg-3 rounded js-scroll-trigger" href="#services">Services</a>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-2 px-0 px-lg-3 rounded js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<div class="page-header bg-primary" style="background-image: url(./img/1.jpg);">
<p class="text-center text-uppercase text-secondary mb-0" id="mainText">Portfolio</p>
</div>
</div>
CSS:
/*for navbar*/
.bg-secondary {
background-color: transparent !important;
/* background-color: transparent !important; */
}
.bg-secondary.scrolled{
background-color: #333300 !important;
}
.page-header{
background-size: cover;
height: auto;
}
JS:
<script>
$(window).scroll(function(){
$('nav').toggleClass('scrolled', $(this).scrollTop() > $('nav'));
});
</script>
解决方案
推荐阅读
- javascript - 智能 DOM 插入(保留子元素的样式)
- spring-boot - 如何从 websocket 客户端(浏览器)使用服务器端的消息?
- java - 在 chrome 最新版本中使用 selenium 处理打印预览窗口
- c# - 分页时如何将默认排序从主键更改为另一个字段?
- unit-testing - 如何为包含 RxJava/RxAndroid 的 ViewModel 编写单元测试
- javascript - 如何将此函数的内容返回给客户端?
- sql - 跨多个层的 SQL 循环/递归
- git - Git push Refspecs:`refs/heads/*:refs/heads/origin` vs `refs/heads/*:refs/heads/*`
- android - 节点 JS FCM 令牌未向用户发送通知
- omnet++ - 如何实现复合模块向量(包括路由器、主机、移动模块等)之间的路由功能?