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

12
src/index.html
View File

@@ -23,8 +23,8 @@
</head>
<body>
<div class="wrapper" id="wrapper">
<nav class="navbar navbar-expand-sm">
<div class="container-fluid" id="navbar-container">
<nav class="navbar navbar-expand-lg sticky-top" id="nav">
<div class="container-fluid">
<div class="navbar-header" id="navbar-header">
<img src="img/logo.svg" alt="Forkio logo">
<span class="navbar-brand">Fork<em>IO</em></span>
@@ -42,17 +42,17 @@
<li class="nav-item">
<a class="default-link nav-link" href="#">Support</a>
</li>
<li class="nav-item">
<a class="raised-button nav-link" href="#">Buy now</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- 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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</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 {
box-sizing: content-box;
padding: 7px 35px;
background-color: $primary;
color: white;

76
src/scss/_navbar.scss
View File

@@ -1,46 +1,54 @@
#navbar-container {
margin: 0 90px;
#nav {
$shrinking-duration: 0.4s;
margin: 0 0;
padding: 0 90px;
height: 100px;
}
background-color: white;
transition: height $shrinking-duration;
#navbar-header {
display: flex;
justify-content: center;
}
#navbar-header {
img {
height: 45px;
&.shrink {
height: 50px;
transition: height $shrinking-duration;
}
span {
margin-left: 17px;
font-family: Lato, sans-serif;
text-transform: uppercase;
font-size: 24px;
font-weight: bold;
#navbar-header {
display: flex;
justify-content: center;
em {
color: $primary;
font-style: normal;
img {
height: 45px;
}
span {
margin-left: 17px;
font-family: Lato, sans-serif;
text-transform: uppercase;
font-size: 24px;
font-weight: bold;
em {
color: $primary;
font-style: normal;
}
}
}
}
#navbar-body {
a {
text-transform: capitalize;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: bolder;
}
#navbar-body {
a {
text-transform: capitalize;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: bolder;
}
a.default-link {
margin: 0 20px;
color: $primary-dark;
}
a.default-link {
margin: 0 20px;
color: $primary-dark;
}
a.raised-button {
@extend .raised-button
a.raised-button {
@extend .raised-button
}
}
}