视差背景未调整大小

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);};