粘贴

Question

我想要做的是当设置词缀时我想将弹出窗口位置改为底部我做的是：

 $('.gallery-holder').on('affix.bs.affix', function (e) {
  console.log('check');

  $(this).find('.popover').popover({
     placement: 'bottom'
  });
})

检查工作正常，但.gallery-holder中弹出窗口的位置并未改变其位置

这是html：

 <div class="gallery-holder affix">
    <label class="price-label">
                    All-in prijs
      <span class="material-icons" data-content="
          <ul class='list-checked'>
              <li>Basishuursom</li>
              <li>Reserveringskosten</li>
              <li>Eindschoonmaak</li>
              <li>Lokale heffingen</li>
          </ul>
          <p>Boek je een vakantiehuis of vakantietent?</p>
          <p>Ontvang gratis de <a href='/vakantiepark/park/attractiepas'>AttractiePas</a>!</p>
                        " data-placement="auto top" data-toggle="popover" data-trigger="focus" tabindex="0" title="" data-original-title="Alle prijzen zijn inclusief:">
                        help
      </span>
   </label>
</div>

这是bootlpy的LINK，因为您可以看到它被触发到顶部展示位置，并且在affix.bs.affix被触发时保持在顶部

Answer 1

您可以使用function选项中内置的placement调用，简单可靠地动态指定弹出窗口的位置。每次触发弹出窗口时，您都可以评估导航栏的状态（是否已修复），然后进行top或bottom的相关分配。

参考您发布的Bootply，这是唯一需要的JavaScript：

$('[data-toggle=popover]').popover({placement: function() {
        if($('.navbar-inverse').hasClass('affix-top')) {
            // console.log('top');                    
            return 'top';
        }
        else {
            // console.log('bottom');
            return 'bottom';
        }
    }                
});

您可以在此处找到一个有效的示例：http://www.bootply.com/dNDj85TQVg。

请注意，当您以这种方式处理弹出窗口时，您应该定位初始化元素而不是弹出窗口本身（因此不是.popover，Bootstrap动态添加）。对于此示例，我使用了data-toggle属性，但是如果您最终可能有多个弹出框，则ID或类更适合作为选择器。