kjb kjb - 2 months ago 9
CSS Question

CSS transition snaps on left side when max-width changes

I have a simple

'.full-width'
class that I'm adding and removing to a
<nav>
when the user scrolls past a banner. The goal is to gradually expand or shrink the
<nav>
when the user scrolls above or below the banner. As you can see from the example CSS, the nav has the
transition
property set.

For some reason, the
<nav>
is snapping back on the left side when the bar expands. The bar still transitions correctly on the right side, and shrinking the bar works perfectly.

Interestingly, this appears to work fine with Bootstrap 3, but something in Bootstrap 4 is causing the navbar to snap.

Anyone see something I'm missing?



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><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>

</div>




kjb kjb
Answer

I discovered the snapping was somehow related to the sudden addition or removal of the max-width property. Simply adding max-width to .container-fliud has everything transitioning beautifully with the following jquery:

let bottomOfBannerContainer =
  $('.banner-container').offset().top +
  $('.banner-container').outerHeight(true) -
  NAVBAR_HEIGHT_IN_PX;

$(window).scroll(function() {
  if (Ember.$(document).scrollTop() >= bottomOfBannerContainer) {
    $('#navbar').addClass('container');
    $('#navbar').removeClass('container-fluid');
  } else {
    $('#navbar').addClass('container-fluid');
    $('#navbar').removeClass('container');
  }
});

and the following simple css change:

.container-fluid {
  max-width: 100%;
}