- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
请告诉我,如何创建 2 行的 bootstrap 4 固定导航栏,第一行居中品牌形象,如 https://www.newyorker.com/ (向下滚动后更改图像大小)和第二行的导航菜单?谢谢!
最佳答案
检查这个 working example :)
如果您在 stackoverflow 中查看示例,请查看完整页面:)
$(window).scroll(()=>{
let distance = $('#header').offset().top;
if(distance > 150){
$('#logo').addClass('header-image-scroll');
$('#nav-collection').addClass('navbar-scroll');
}
else {
$('#logo').removeClass('header-image-scroll');
$('#nav-collection').removeClass('navbar-scroll');
}
})
#header {
height: 120px;
}
#nav-collection {
transition: margin 300ms ease-in-out;
font-size: .80rem;
}
#nav-collection li {
padding: 5px;
margin-right: 30px;
}
#logo{
height: 80%;
width: auto;
transition: transform 300ms ease-in-out;
}
.header-image-scroll{
transform: scale(0.7);
}
.navbar-scroll {
margin-top: -25px;
}
.content {
height: 100vh;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-light sticky-top bg-white">
<div class="container-fluid p-0">
<button class="navbar-toggler my-2" type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-column align-items-center text-center ml-lg-2 ml-0" id="navbarCollapse">
<ul class="navbar-nav flex-row mb-md-1 mt-md-0 mb-3 mt-2">
<li class="nav-item">
<div id="header" class="d-flex align-items-center justify-content-center">
<img src="https://logos-download.com/wp-content/uploads/2016/11/The_New_Yorker_logo.png" id="logo">
</div>
</li>
</ul>
<ul class="navbar-nav justify-content-center w-100 border-top border-bottom font-weight-bold" id="nav-collection">
<li class="nav-item active">
<a class="nav-link" href="#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Culture</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Books</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Business & Tech</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Humor</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Cartoons</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Magazine</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Video</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Podcasts</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="content"></div>
关于html - bootstrap 4 固定导航栏有 2 行,第一行居中品牌形象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52776935/
如果有人问过这个问题,我深表歉意,但如果用户缩小他们的显示,我会尝试将我的导航栏居中。 现在,我将导航栏项 float 到右侧,将品牌 float 到左侧以进行大型显示。当显示缩小时,它们保留在右侧和
是否可以在不修改/从源代码构建的情况下更改 Eclipse 品牌?喜欢: 更改启动画面 更改启动器/exe 名称和图标 换盒子 更改应用程序窗口标题 在从 eclipse 网站下载的 Eclipse
我曾尝试在没有 YouTube 品牌的情况下嵌入视频,因为它会将我的流量发送到 YouTube。我设置了 modestbranding=1 和 showinfo=0 但当我将光标悬停在播放器上时,我仍
我是 JSF 的新手,不知道如何在我的 Bootsfaces 导航栏中为我的图像添加链接。 图像文件夹中。 最佳答案 brandImg 只是要显示的图像的 URL。它可以是相对的也
我以前使用 Xcode 6.1.1,今天我安装了 Xcode 7.3 beta 3,它给出了一些警告,其中之一是“Brand Assets”,如下图所示。 我将我的图标添加到 AppIcon,一切正常
我正在使用 这会删除右侧底部的“Youtube” Logo 。并且还删除了悬停时出现的“标题栏”。 但这个问题是,当我将鼠标悬停在视频上时,然后在右侧底部“Youtube”缩略图/文本后面出现,当我
这是我的想法(原谅 Django 格式): class VehicleMake(Model): name = CharField(max_length=50) class VehicleMod
几天前我开始学习图像识别,我想做一个需要识别 Android 中不同品牌 Logo 的项目。 例如:如果我在 Android 设备中拍摄 Nike 标志的照片,那么它需要显示“Nike”。 低计算时间
我正在使用 mysql 查询返回适合 php 中某些汽车的产品数组,如下所示; array { [0]=> array(3) { ["sku"]=> string(16) "123a "
只是想让你知道,到今天为止我对 Bootstrap 还是个新手。我以前有使用 HTML/CSS 的经验,所以我决定尝试学习一些新东西,然后我直接进入了 Bootstrap 4 的深层次,跳过了 3(我
我正在尝试在我正在构建的网站上收紧 HTML5。导航和 Logo 需要在顶部栏中,我包括一个 slider 、引号和一些按钮。我不确定 header 是否真的应该包含引述或按钮。 如果不是,我真的需要
我创建了一个 Blazor WASM 项目。 它正在使用身份验证,并为此导航到身份区域中它自己的服务器端页面。 我试图搭建这些页面以更改导航栏上的标题,但我无法弄清楚。 它当前显示项目名称(即 Bla
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗?更新问题,使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
有人知道是否有办法为 Azure AD B2C 发送的电子邮件添加品牌吗? 本页https://learn.microsoft.com/en-us/azure/active-directory-b2c
谁知道Mifare 1K card中写入和读取数据的代码是什么? ??我们使用 C#。 最佳答案 来自 DreamInCode , 查看 Goethals 的评论: "Pretty hard to f
我找到了很多解决这个主题的帖子,但是我的代码仍然遇到问题: 我有 first.png 是黑白的,second.png 是彩色的。我需要在悬停时为当前品牌着色。可以找到示例:h
我正在尝试使用 React Bootstrap 在我的 React 应用程序上创建一个与导航栏一起使用的 Logo ,并且我使用了 documentation as a guide .但是,当使用lo
我需要使用自定义产品名称构建基于 android chromium 的自定义浏览器。 我找到了配置文件(src/chrome/app/theme/chromium/BRANDING)并更改了 PROD
我想知道如何将品牌应用到 CRM 2011 网站? 我正在考虑添加一个客户横幅来代替放置在每个页面顶部的当前 Microsoft Dynamics CRM Logo (在顶部功能区上方的 div 中)
我有一个相当简单的查询,用于获取车辆属性,例如年份、品牌和型号。目前的数据看起来与此类似...: +------+------+-----------+-------+----------+-----
我是一名优秀的程序员,十分优秀!