jquery - 使用 Bootstrap 和 Aurelia 附加的井的随机移动

Question

我正在尝试将一口井固定在正确的位置。我得到了它的 codepen 示例，它可以正常工作。

http://codepen.io/anon/pen/Egaqxb

bootstrap.css、bootstrap.js 和 jQuery 已作为库依赖项添加到上述代码笔中。

<div class="container-fluid">
<div class="row">
    <div class="col-md-2">
        <!-- selection menu bar -->
        <div class="well well-lg" data-spy="affix">
            <!-- Selection "Program" -->
            <div class="form-element">
                <label for="ln">Program</label>
                <form>
                    <div class="form-group">
                        <select class="form-control">
                            <option>Select a Program</option>
                        </select>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-md-10">
        <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
      <p> testdsafjsdlkfjslk</p>
    </div>
</div>

.affix {
  top: 0;
}

.affix-top {
  display:inline-block
}

.affix-bottom {
  position: absolute;
  width: 100%;  
}

我在让它在 Aurelia 中运行时遇到了一些问题，有人帮助我生成了以下 gist.run。它在一定程度上起作用，显示略有不同(即使 HTML 代码完全相同)并且一个奇怪的异常现象是当您单击井时，它会出于某种原因在屏幕上移动。我很难相信是 Bootstrap 导致了它，因为它在没有 Aurelia 的情况下也能正常工作。

附上自定义属性示例: https://gist.run/?id=984dd297691abccca983c995d09ade7a

奇怪的是，如果我不使用自定义属性而只是将这些东西放在 attached() 中，我仍然会遇到不同的显示问题，但单击井不会导致它在屏幕上跳来跳去. 没有自定义属性示例的附加: https://gist.run/?id=30ef1d1e3126f5a1aebd44d30b9ccf44

这让我相信 Aurelia 在背后做了一些我不知道的奇怪事情，我似乎无法追查到根本原因。

Answer 1

我会坚持任何自定义属性都应遵循严格的命名约定的规则:My Custom Attribute = mcaThing

但是!现在我明白你的问题了(我想) 因此，在您的 attach() 函数中，您可能想要放入 jQuery 内容。 我不确定为什么它到处乱跳，但通过指定偏移量，您可以控制词缀 ()。

attached() {
  $(this.element).affix({
    offset: {
      top: 100
    }
  });
}

希望这对您有所帮助!