naritoブログ

【お知らせ】
新ブログができました。今後そちらで更新し、このサイトは更新されません(ウェブサイト自体は残しておきます)
このブログの内容に関してコメントしたい場合は、新ブログのフリースペースに書き込んでください

このブログの内容を新ブログに移行中です。このブログで見つからない記事は、新ブログにありま

Bootstrapで、スクロールしてくるnavbar(追従)

約1234日前 2016年4月6日11:43
プログラミング関連
Bootstrap3


今回は、画面をスクロールするとついてくるnavbarのメモです。
ソースは
http://torina.top/detail/171/
http://torina.top/detail/172/
に付け足したものになります。

このようにすることで、簡単に作ることができます。

<header id="header" data-spy="affix" data-offset-top="60">


下にスクロールして追従してきたタイミングや、上にスクロールして戻ったタイミングで何かしたい、ってこともありますね。
そのような細かい挙動の制御は、以下のように書くことができます。

<header id="header">


js

$('header').affix({
offset: {
top: $('header').height()
}
});

$('header').on('affix.bs.affix', function (){
// 下にスクロールして追従してきたタイミング
});

$('header').on('affix-top.bs.affix', function (){
// 上にスクロールして戻ったタイミング
});


top:どのぐらいのスクロール量で追従させるかです。
$('header').height()のかわりに、100とか200とかいれれます。

$('header').affix({
offset: {
top: $('header').height()
}
});




追従してきたヘッダーの幅が微妙に足りないので、
以下で修正しましょう。

header {
background-color: #337ab7;;
color: #fff;
width: 100%;
}




以上はheaderの例です。
では、headerの下にあるnavbarをスクロールさせたいならばどうでしょうか。以下になります。
css修正・追加

.navbar-custom {
background-color: #337ab7;
color:#fff;
border-radius:0;
border-color: #337ab7;
width: 100%;
}

.affix {
top: 0;
z-index:10;
}



html修正

<nav class="navbar navbar-custom navbar-default" data-spy="affix" data-offset-top="300">


opacityをつけると、ちょっと目立たなくなりますね。

.affix {
top: 0;
z-index:10;
opacity: 0.7;
}




全ソース

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/main.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header id="header">
<div class="container">
<h1 class="header-h1">ページの見出し等</h1>
<form action="/" class="header-form header-right" role="search">
<div class="form-group">
<input type="text" name="query" class="form-control" placeholder="クイックサーチ!">
</div>
<button type="submit" class="btn btn-default">Quick Search</button>
</form>
</div>
</header>

<img class="img-responsive" src="img/head.jpg" >

<nav class="navbar navbar-default navbar-custom" data-spy="affix" data-offset-top="300">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ナビバー</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Info</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

<script src="js/main.js"></script>
</body>
</html>



header {
background-color: #337ab7;;
color: #fff;
}

.header-h1 {
font-size: 16px;
display: inline-block;
}

.header-form {
margin-top: 8px;
margin-right: -15px;
margin-bottom: 8px;
margin-left: -15px;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
}
@media (min-width: 768px) {
.header-form .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.header-form .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}
}
@media (max-width: 767px) {
.header-form .form-group {
margin-bottom: 5px;
}
.header-form .form-group:last-child {
margin-bottom: 0;
}
}
@media (min-width: 768px) {
.header-form {
width: auto;
padding-top: 0;
padding-bottom: 0;
margin-right: 0;
margin-left: 0;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
@media (min-width: 768px) {
.header-right {
float: right !important;
margin-right: -15px;
}
.header-right ~ .header-right {
margin-right: 0;
}
}

.navbar-custom {
background-color: #337ab7;
color:#fff;
border-radius:0;
border-color: #337ab7;
width: 100%;
}

.navbar-custom .navbar-nav > li > a {
color:#fff;
}
.navbar-custom .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
color: #fff;
background-color:#fff;
color:#000;
}
.navbar-custom .navbar-brand {
color:#fff;
}

.affix {
top: 0;
z-index:10;
opacity: 0.7;
}


参考
http://stackoverflow.com/questions/19717290/bootstrap-3-using-affix-to-fixing-navbar-position-to-top-when-scrolling
http://stackoverflow.com/questions/21301316/how-to-bootstrap-navbar-static-to-fixed-on-scroll
http://bootstrap3.cyberlab.info/javascript/affix.html