Question

我在页面上使用了bootstrap左侧导航：https://blackrockdigital.github.io/startbootstrap-simple-sidebar/

结合使用视差js：http://pixelcog.github.io/parallax.js/

当我切换导航时，内容被推到右侧，这很好，但是视差图像不是。它保持原位，在视差背景和被推向右侧的内容之间形成巨大的白色差距。

当我调整窗口大小时，视差背景会更新，但在我切换导航菜单时则不会。

如何解决这个问题？

修改

以下是有关codepen的示例：http://codepen.io/anon/pen/wWVJEX

切换导航时，内容会移动，但视差图像不会移动。如果您尝试调整窗口大小或检查元素（这会调整窗口大小），视差也会调整大小。

＆＃13;

$(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");
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

根据parallax.js文档：

另外，请记住，一旦初始化，视差插件就会假设固定页面布局，除非遇到滚动或调整大小事件。如果你有一个动态页面，其中另一个JavaScript方法可能会改变在DOM中，您必须手动刷新视差效果以下命令：

public static async Task<bool> AddAccountAsync(this MyContext context, MyModel model)
{
    try
    {
        Role role = new Role(TrackerRole.Owner);
        Account account = new Account(model.AccountCurrency, model.AccountName, model.Description);
        UserAccount uc = new UserAccount
        {
            User = model.User,
            Account = account,
            Role = role
        };
        account.UserAccounts.Add(uc);
        context.Accounts.Add(account);
        await context.SaveChangesAsync();

        model.User.UserAccounts.Add(uc);
        return true;
    }
    catch (DbUpdateException ex)
    {
        // LOG
    }
    return false;
}

因此，如果您在jQuery(window).trigger('resize').trigger('scroll');点击事件中添加此行，则应刷新视差容器：

#menu-toggle

我还在超时中包裹了这条线，以便在导航已经调整大小后视差插件会刷新，否则你最终会错误地定位。

修改

在回复您的评论时，您可以添加一些css以使转换更平滑。尝试这样的事情：

$("#menu-toggle").click(function(e) { e.preventDefault(); $("#wrapper").toggleClass("toggled"); setTimeout(function(){ jQuery(window).trigger('resize').trigger('scroll'); }, 500); });

Answer 2

只需将以下代码添加到parallax.js

的末尾即可

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

视差背景未调整大小

2 个答案: