視差背景未調整大小

Question

我在頁面上使用引導程序的左側導航： https : //blackrockdigital.github.io/startbootstrap-simple-sidebar/

結合視差js： http ： //pixelcog.github.io/parallax.js/

當我切換導航時，內容將被推到右側，這很好，但是視差圖像卻沒有。 它保持原位，使視差背景和向右推的內容之間形成巨大的白色間隙。

調整窗口大小時，視差背景會更新，但切換導航菜單時不會更新。

如何解決這個問題？

編輯：

這是有關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 click事件中添加此行，則應刷新視差容器：

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

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

});

我還將該行包裝為超時，以便在調整導航大小之后刷新視差插件，否則最終將導致其定位不正確。

編輯：

根據您的評論，您可以添加一些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);};