There is a simple '.full-width' class that is being added and removed from a <nav> element when the user scrolls past a banner. The intention is to gradually expand or shrink the <nav> based on the user's scrolling position in relation to the banner. The CSS provided includes a transition property for the nav element.
However, there seems to be an issue where the <nav> snaps back on the left side when it expands. The expansion and shrinking transitions work correctly on the right side but encounter snapping on the left side.
Interestingly, this functionality works fine with Bootstrap 3, but there appears to be a problem with Bootstrap 4 causing the navbar to snap unexpectedly.
If anyone can spot something I might be overlooking or have any insights into why this behavior is occurring, your input would be greatly appreciated.
var NAVBAR_HEIGHT_IN_PX = 50;
$(document).ready(function() {
var bottomOfBannerContainer =
$('.banner-container').offset().top +
$('.banner-container').outerHeight(true) -
NAVBAR_HEIGHT_IN_PX;
$(window).scroll(function() {
if ($(document).scrollTop() >= bottomOfBannerContainer) {
$('#navbar').addClass('container');
$('#navbar').removeClass('full-width');
} else {
$('#navbar').addClass('full-width');
$('#navbar').removeClass('container');
}
});
});#navbar {
transition: all 0.8s ease;
}
.banner-container {
width: 100%;
min-height: 200px !important;
background: blue;
}
.full-width {
max-width: 100%;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="navbar" class="navbar navbar-fixed-top navbar-dark bg-inverse full-width">
<a class="navbar-brand" href="#">Hello S/O!</a>
</nav>
<div id="content" class="container">
<div class="text-center col-xs-12 banner-container">workplz</div>
<p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p><br><p>Content!</p...
</div>