Parallax фона не изменение размера

Question

Я использую навигации слева Bootstrap на моей странице: https://blackrockdigital.github.io/startbootstrap-simple-sidebar/

С комбинацией параллакса ЯШ: http://pixelcog.github.io/parallax.js/

Когда я переключить навигацию, содержание получает перемещается вправо, и это хорошо, но изображение параллакса не делает. Он остается на месте, создавая огромный белый промежуток между фонами параллакса и контентом, который был сдвинут вправо.

Фон параллакса обновляется при изменении размера окна, но не при переключении меню навигации.

Как это исправить?

EDIT:

Вот пример на codepen: http://codepen.io/anon/pen/wWVJEX

При переключении навигации, движется содержание, но параллакса изображения нет. Если вы попытаетесь изменить размер окна или просмотреть элемент (который изменит размер окна), параллакс также будет изменен.

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

Согласно parallax.js документы:

Кроме того, имейте в виду, что после инициализации, параллакс плагин предполагает фиксированный макет страницы, если она обнаруживает свиток или изменить размер. Если у вас есть динамическую страницу, в которой другой Javascript метод может изменить в DOM, вы должны вручную обновить эффект параллакса с следующими командами:

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

Так что, если вы добавите в этой линии в вашем #menu-toggle нажмите событие, это должно обновить параллакса контейнер:

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

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

}); 

Я также обернуты линию в тайм-аут, так что параллакс плагин обновит после навигации уже изменен, в противном случае вы В конце концов, это неправильно позиционируется.

EDIT:

в ответ на ваш комментарий, вы можете добавить некоторые CSS, чтобы сделать переход немного более гладкой. Попробуйте что-то вроде этого:

.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

Просто добавьте следующий код в конец вашего parallax.js

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