"resizing section on scroll"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="header">
<h1 class="header_logo">Resizing Fixed Header</h1>
</div>
<div class="offset">
<p>Scroll down to initiate resizing of the page header.</p>
</div>
<script>
window.addEventListener('scroll', function() {
navbarScroll();
});
function navbarScroll() {
var y = window.scrollY;
if (y > 10) {
var header = document.getElementsByClassName('header')[0];
header.classList.add('small');
} else if (y < 10) {
var header = document.getElementsByClassName('header')[0];
header.classList.remove('small');
}
}
</script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
height: 1500px;
background: url(https://www.brainpickings.org/wp-content/themes/brainpickings/images/bckgd_body.png);
}
.offset {
margin-top: 0;
padding-top: 270px;
text-align: center;
transition: .3s;
}
.header {
position: fixed;
width: 100%;
height: 250px;
font-weight: bold;
text-align: center;
background: gold;
transition: .3s;
}
.header.small {
height: 70px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.header.small ~ .offset {
padding-top: 140px;
}
.header.small .header_logo {
padding-top: 20px;
font-size: 20px;
text-shadow: none;
}
.header_logo {
font-family: 'Oswald', sans-serif;
margin: 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: