Javascript 宽页固定导航中的引导popover

我在带有固定宽度容器的页面上使用固定引导响应式导航，即在小型设备上，页面本身有一个水平滚动条，但导航采用一个页面宽度

导航中的一个按钮有一个弹出框。问题是：当您向右滚动主页面时，popover呈现不正确或完全消失

HTML

以下是一个例子：

• 运行代码段
• 按“联系Popover”查看Popover
• 向右滚动页面
• 再次按“Contact Popover”查看未完全渲染的Popover

---

我尝试使用popover的

容器

和

视口

属性，但没有解决问题。（）

所以我最后用了一点javascript代码来调整popover的位置

• 我们需要将popover触发器设置为

  manual

• 我们必须为popover本身设置

  width

  或

  minwidth

• 我们知道popover上方的小箭头位置总是正确的，我们可以使用箭头偏移来计算正确的popover位置

代码如下：

$(function () {
    $('[data-toggle="popover"]').popover();
    $('body').on("click", '[data-toggle="popover"]', function (e) {
        e.preventDefault();
        if (!$(this).attr('aria-describedby')) {
          $(this).popover("show");
          // aria-describedby attribute keeps id of the popover
          var $pop = $('#' + $(this).attr('aria-describedby'));
          if($pop) {
            // find arrow element within popover to obtain its offset
            var $arrow = $pop.find('.arrow');
            // set new left position for the popover
            $pop.css('left', $arrow.offset().left - $pop.width()*0.75);
            // set new arrow position
            $arrow.css('left', '75%');
          }
        } else {
            $(this).popover("hide");
        }
    });
});

---

下面是一个工作示例：

所以我最后用了一点javascript代码来调整popover的位置

• 我们需要将popover触发器设置为

  manual

• 我们必须为popover本身设置

  width

  或

  minwidth

• 我们知道popover上方的小箭头位置总是正确的，我们可以使用箭头偏移来计算正确的popover位置

代码如下：

$(function () {
    $('[data-toggle="popover"]').popover();
    $('body').on("click", '[data-toggle="popover"]', function (e) {
        e.preventDefault();
        if (!$(this).attr('aria-describedby')) {
          $(this).popover("show");
          // aria-describedby attribute keeps id of the popover
          var $pop = $('#' + $(this).attr('aria-describedby'));
          if($pop) {
            // find arrow element within popover to obtain its offset
            var $arrow = $pop.find('.arrow');
            // set new left position for the popover
            $pop.css('left', $arrow.offset().left - $pop.width()*0.75);
            // set new arrow position
            $arrow.css('left', '75%');
          }
        } else {
            $(this).popover("hide");
        }
    });
});

---

下面是一个工作示例：

我想你可能需要用

onscroll来处理这个问题

看看这个答案@hammus谢谢你的建议，这个问题是关于垂直位置的，但可能也可以用在水平位置上。我会试试这个！我想你可能需要用

onscroll

来处理这个问题，看看这个答案@hammus谢谢你的建议，这个问题是关于垂直位置的，但也可能是水平位置。我会试试这个！

$(function () {
    $('[data-toggle="popover"]').popover();
    $('body').on("click", '[data-toggle="popover"]', function (e) {
        e.preventDefault();
        if (!$(this).attr('aria-describedby')) {
          $(this).popover("show");
          // aria-describedby attribute keeps id of the popover
          var $pop = $('#' + $(this).attr('aria-describedby'));
          if($pop) {
            // find arrow element within popover to obtain its offset
            var $arrow = $pop.find('.arrow');
            // set new left position for the popover
            $pop.css('left', $arrow.offset().left - $pop.width()*0.75);
            // set new arrow position
            $arrow.css('left', '75%');
          }
        } else {
            $(this).popover("hide");
        }
    });
});