bartek/forkio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enable navbar shrinking on scrolling

Browse Source
This commit is contained in:
Bartlomiej Pluta (PGS Software)
2018-03-15 17:07:38 +01:00
parent 926685bf10
commit f463a05726
4 changed files with 61 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/index.html
View File

@@ -23,8 +23,8 @@
</head> </head>
<body> <body>
<div class="wrapper" id="wrapper"> <div class="wrapper" id="wrapper">
<nav class="navbar navbar-expand-sm"> <nav class="navbar navbar-expand-lg sticky-top" id="nav">
<div class="container-fluid" id="navbar-container"> <div class="container-fluid">
<div class="navbar-header" id="navbar-header"> <div class="navbar-header" id="navbar-header">
<img src="img/logo.svg" alt="Forkio logo"> <img src="img/logo.svg" alt="Forkio logo">
<span class="navbar-brand">Fork<em>IO</em></span> <span class="navbar-brand">Fork<em>IO</em></span>
@@ -42,17 +42,17 @@
<li class="nav-item"> <li class="nav-item">
<a class="default-link nav-link" href="#">Support</a> <a class="default-link nav-link" href="#">Support</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="raised-button nav-link" href="#">Buy now</a> <a class="raised-button nav-link" href="#">Buy now</a>
</li> </li>
</ul> </ul>
</div> </div>
</nav> </nav>
</div>
<!-- JavaScript --> <!-- JavaScript -->
<script src="js/script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body> </body>
</html> </html>

14
src/js/script.js
View File

@@ -1 +1,13 @@
console.log('Hello, world'); $(document).ready(function () {
var scrollTop = 0;
$(window).scroll(function () {
scrollTop = $(window).scrollTop();
if (scrollTop >= 100) {
$('#nav').addClass('shrink');
} else if (scrollTop < 100) {
$('#nav').removeClass('shrink');
}
});
});

1
src/scss/_buttons.scss
View File

@@ -1,5 +1,4 @@
a.raised-button { a.raised-button {
box-sizing: content-box;
padding: 7px 35px; padding: 7px 35px;
background-color: $primary; background-color: $primary;
color: white; color: white;

16
src/scss/_navbar.scss
View File

@@ -1,14 +1,21 @@
#navbar-container { #nav {
margin: 0 90px; $shrinking-duration: 0.4s;
margin: 0 0;
padding: 0 90px;
height: 100px; height: 100px;
background-color: white;
transition: height $shrinking-duration;
&.shrink {
height: 50px;
transition: height $shrinking-duration;
} }
#navbar-header { #navbar-header {
display: flex; display: flex;
justify-content: center; justify-content: center;
}
#navbar-header {
img { img {
height: 45px; height: 45px;
} }
@@ -44,3 +51,4 @@
@extend .raised-button @extend .raised-button
} }
} }
}