use*_*852 2 html css navbar twitter-bootstrap-4 bootstrap-4
我已经搜索了整堆,但似乎无法找到一个有效的解决方案.基本上我的NavBar完全是我想要的.我现在想要缩小NavBar,当我的页面向下滚动时,使用漂亮的平滑过渡(动画)使其变得更加纤细.
这是我当前NavBar的HTML标记:
<header>
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"><img class="animated bounceIn" src="img/logo-light.png" alt="I Web You – Perth Website Branding"></a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</nav>
</header>
我有什么想法可以达到这个目的吗？我做了很多搜索,但大多数解决方案都是针对Bootstrap 3.
干杯
Zim*_*Zim 12
2018年更新
Bootstrap 3.x的滚动Navbar实现的大部分缩减都是使用Affix组件在特定滚动位置更改导航栏的样式.
但是,Affix 已从Bootstrap 4中删除 ..
"删除了Affix jQuery插件.我们建议使用位置:粘性polyfill.请参阅HTML5 Please条目以获取详细信息和特定的polyfill建议."
要在Bootstrap 4中创建类似的Navbar效果,可以position: sticky通过将sticky-top类添加到Navbar 来使用(并非在所有浏览器中都支持).这可以在Navbar到达顶部时" 粘住 "它,但不会触发事件以指示它何时" 卡住 ".因此,JS需要在" 卡住 " 时更改Navbar样式.
现代浏览器支持的一种JS方法是IntersectionObserver.当Navbar上方的隐藏触发元素到达视口时(当stuck应用于html元素时),使用它来"观察" .
.stuck .sticky-top {
background-color: #222;
padding-top: 3px;
padding-bottom: 3px;
}
Sticky Top Navbar - IntersectionObserver演示
您还可以使用scroll 插件(如ScrollPos-Styler),或者编写自己的jQuery来控制滚动条上的导航栏样式...
这个怎么运作:
固定顶部导航栏data-toggle="affix":
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-sm py-3" data-toggle="affix">
<a href="#" class="navbar-brand">Brand</a>
<a class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">?</a>
<ul class="nav navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">..</a>
</li>
</ul>
</div>
jQuery观看滚动位置并有条件地切换.affix类:
var toggleAffix = function(affixElement, scrollElement, wrapper) {
var height = affixElement.outerHeight(),
top = wrapper.offset().top;
if (scrollElement.scrollTop() >= top){
wrapper.height(height);
affixElement.addClass("affix");
}
else {
affixElement.removeClass("affix");
wrapper.height('auto');
}
};
/* use toggleAffix on any data-toggle="affix" elements */
$('[data-toggle="affix"]').each(function() {
var ele = $(this),
wrapper = $('<div></div>');
ele.before(wrapper);
$(window).on('scroll resize', function() {
toggleAffix(ele, $(this), wrapper);
});
// init
toggleAffix(ele, $(window), wrapper);
});
用于操作词缀样式的CSS(填充/高度,颜色等):
html,body {
height:100%;
padding-top:56px; /*height of fixed navbar*/
}
.navbar {
-webkit-transition:padding 0.2s ease;
-moz-transition:padding 0.2s ease;
-o-transition:padding 0.2s ease;
transition:padding 0.2s ease;
}
.affix {
padding-top: 0.2em !important;
padding-bottom: 0.2em !important;
-webkit-transition:padding 0.2s linear;
-moz-transition:padding 0.2s linear;
-o-transition:padding 0.2s linear;
transition:padding 0.2s linear;
}
section {
min-height:calc(100% - 70px);
}
注意:从Bootstrap 4.0.0开始,Navbar的变化略有navbar-toggleable-*改变navbar-expand-
最后,如果你知道Navbar需要坚持的确切位置,你可以使用一个简单的jQuery $(window).scroll()函数...
$(window).scroll(function() {
/* affix after scrolling 100px */
if ($(document).scrollTop() > 100) {
$('.navbar').addClass('affix');
} else {
$('.navbar').removeClass('affix');
}
});
https://www.codeply.com/go/62Roy6RDOa
更多Bootstrap 4更改滚动示例上的Navbar样式:滚动
后简单粘贴(4.0.0)
收缩高度(4.0.0)
收缩高度(alpha-6)
透明背景
更改颜色滚动
更改导航栏bg颜色与scrollspy部分
相关问题:将
导航栏固定在滚动顶部
Affix在Bootstrap 4(alpha)中不起作用
小智 5
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});nav.navbar.shrink {
width: 100%;
height: 35px;
background-color: #111;
box-shadow: 0 1px 0 0 #dadada;
position: fixed;
left: 0px;
transition: all 1.5s ease;
}
nav.navbar.shrink .navbar-brand img{
height: 50px;
width: 120px;
transition: all 1.5s ease;
}
nav.navbar.shrink a {
font-size: 14px;
padding-bottom: 10px !important;
padding-top: 10px !important;
transition: all 1.5s ease;
}
nav.navbar.shrink .navbar-toggler {
margin: 8px 15px 8px 0;
padding: 4px 5px;
transition: all 1.5s ease;
}
.header{
height:100px;
}
.navbar-brand{
padding-left:30px;
padding-top:30px;
padding-bottom:30px;
}
.collapse{
padding-right:30px;
}
.logo{
width: 170px;
height: 58px;
}
.hero-container p{
color:black;
text-align: center;
height:auto;
}
.image-container{
text-align:center;
}
.banner{
background-image: url(../images/banner.jpg);
background-repeat: no-repeat;
padding-top: 70px;
padding-left: 30px;
padding-right:30px;
padding-bottom: 78px;
width:100%;
height:auto;
}
.banner .row h4,p{
color: white;
}
.client{
height: 635px;
margin-top:74px;
padding-right:10px;
padding-left:10px;
}
.btn-primary{
background: transparent;
width:170px;
border: 1px solid white;
color:white;
}
form{
padding-top:56px;
padding-bottom:56px;
padding-left: 30px;
height:auto;
}
form,h2,label{
color:white;
}
.above{
margin-bottom:34px;
width:100%;
height:auto;
padding-right: 30px;
}
.below{
width:100%;
height:auto;
padding-right: 30px;
}
.heading{
color: black;
margin-top: 62px;
}
.lead{
color:black;
}
.form_banner{
background-image: url(../images/form_banner.jpg);
background-repeat: no-repeat;
width: 100%;
}
.contact{
background-image: url(../images/contact.png);
background-repeat: no-repeat;
margin-bottom: 40px;
margin-top:50px;
height:auto;
width:100%;
padding-left: 313px;
padding-right:313px;
padding-top: 64px;
padding-bottom:64px;
text-align: center;
}
.contact, h5{
color:white;
}
hr{
display: block;
margin-top: 0.1em;
margin-bottom: 0.1em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
.footer_img{
padding-left: 30px;
width:170px;
height:63px;
}
.footer{
margin-bottom: 41px;
}<!doctype HTML>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container-fluid">
<div class="header container">
<div class="row">
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<a class="navbar-brand" href="#">HeRo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Company<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Capabilities</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Customers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Innovation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<div class="hero-container container">
<div class="row">
<div class="col">
<p>Commerce</p>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div class="col">
<p>Interactive</p>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p></div>
<div class="col">
<p>Analytics</p>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p></div>
<div class="col">
<p>Integration</p>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p></div>
<div class="col">
<p>Cloud & Management Services</p>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p></div>
</div>
</div>
<div class="banner container-fluid">
<div class="row">
<h4>Dedicated, Experience, Innovative</h4>
<p>For over a decade our experienced team has been delivering Digital Commerce solutions that change the way consumers research, interact and purchase. As mobility and pervasive connectivity continue to transform buying habits, we are focused on helping businesses discover and maximise new opportunities – be it direct to consumers, via resellers, or by other innovative models.</p>
<p>Our expertise is centred on the Digital Commerce solution that excels in delivering best-in-class Scalability and User Experience. From our global headquarters in India, we have expanded to empower Clients across four continents, with offices located in Singapore, USA, Australia and the UK.</p>
<h4>BUSINESS</h4>
<p>Our approach is to listen to you as the experts in your market. We look to complement your insight with a project team capable of understanding your business and delivering better digital experience. Our in-country Advisors will help assess your requirements and collaboratively design a service that meets your strategic goals.</p>
<h4>TECHNOLOGY</h4>
<p>With a specialised team of Creative Designers, Developers, Engineers and Architects we have substantial experience across many leading enterprise and open source platforms. Beyond our core expertise in Digital Commerce, we also offer Mobility, Integration, Digital Analytics, Development and other custom Web and applications development services.</p>
</div>
</div>
<!-- FOOTER -->
<div class="footer container">
<div class="clearfix">
<span class="float-left"><a href="#"><img class="footer_img" src="images/ibm_logo.png"></a></span>
<span class="float-right">© AbcXyZ Inc and Affiliates.All Rights Reserved</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>使用此代码非常简单。希望您能谅解。我对类进行了缩小，一旦它超过50像素，它将添加到导航栏中。剩下的就是所有css，我已经在Shrink类中添加了。
| 归档时间： |
|
| 查看次数： |
34052 次 |
| 最近记录： |