Parallax background not resizing

Question

I'm using bootstrap's left navigation on my page: https://blackrockdigital.github.io/startbootstrap-simple-sidebar/

With a combination of parallax js: http://pixelcog.github.io/parallax.js/

When I toggle the navigation, the content gets pushed to the right, and that is good, but the parallax image doesn't. It stays in place, making a huge white gap between parallax background and content that was pushed to the right.

The parallax background gets updated when I resize the window, but not when I toggle the navigation menu.

How to fix this?

EDIT:

Here's an example on codepen: http://codepen.io/anon/pen/wWVJEX

When you toggle the navigation, the content moves but the parallax image doesn't. If you try to resize the window or inspect element (which would resize the window), the parallax will be resized also.

 $(document).ready(function() { $('#about-us-image').parallax({ imageSrc: 'https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder3.png', speed: 0.4 }); }); $("#menu-toggle").click(function(e) { e.preventDefault(); $("#wrapper").toggleClass("toggled"); }); 

 #about-us-image { height: 628px; } .about-us { background: #000; color: #fff; padding: 15px; } .col-md-6 { padding: 0; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://blackrockdigital.github.io/startbootstrap-simple-sidebar/css/simple-sidebar.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="http://pixelcog.github.io/parallax.js/js/parallax.min.js"></script> <div id="wrapper"> <!-- Sidebar --> <div id="sidebar-wrapper"> <ul class="sidebar-nav"> <li class="sidebar-brand"> <a href="#"> Start Bootstrap </a> </li> <li> <a href="#">Dashboard</a> </li> <li> <a href="#">Shortcuts</a> </li> <li> <a href="#">Overview</a> </li> <li> <a href="#">Events</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#">Services</a> </li> <li> <a href="#">Contact</a> </li> </ul> </div> <!-- /#sidebar-wrapper --> <!-- Page Content --> <div id="page-content-wrapper"> <div class="container"> <div class="row"> <div class="col-md-6"> <div id="about-us-image"></div> </div> <div class="col-md-6"> <div class="about-us"> <h3>About us</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> <br> <p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p> <br> <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a> </div> </div> </div> </div> </div> </div> 

Answer 1

According to the parallax.js docs:

Also, keep in mind that once initialized, the parallax plugin presumes a fixed page layout unless it encounters a scroll or resize event. If you have a dynamic page in which another javascript method may alter the DOM, you must manually refresh the parallax effect with the following commands:

jQuery(window).trigger('resize').trigger('scroll');

So if you add in this line in your #menu-toggle click event, this should refresh the parallax container:

$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");

  setTimeout(function(){
      jQuery(window).trigger('resize').trigger('scroll');
  }, 500);

});

I've also wrapped the line in a timeout, so that the parallax plugin refreshes after the navigation has already resized, otherwise you'll end up with it being positioning incorrectly.

EDIT:

in response to your comment, you can add some css to make the transition a bit smoother. Try something like this:

.parallax-mirror {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

Answer 2

Just add following code to end of your parallax.js

document.getElementsByTagName("body")[0].onresize = function() {
   setTimeout(function(){
        jQuery(window).trigger('resize').trigger('scroll');
}, 100);};