javascript - 我正在尝试使用 balloon.js 显示气球

Question

我正在尝试使用 balloon.js 显示气球。

https://urin.github.io/jquery.balloon.js/

这是我的代码。

<div class="Wrap" style="background:#ccc; width:600px; height:1200px; margin:0 auto;">
    WRAP
    <div class="Bottom" id="target" style="position:fixed; bottom: 0; background:#ff69b4; height:100px; width:60px; margin-right:-360px;">Bottom</div>
</div>
<div id="balloon-image" style="display:none; bottom: 0px;">
    <img style="width: 90px; height: 47px;" src="https://i.imgur.com/Gcmy1AX.png">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="./balloon.js"></script>
<script type="text/javascript">
    let balloonDiv = $('#balloon-image');
    let target = $('#target');
    let balloonSetting = {
        html: true,
        position: "right",
        offsetY: 20,
        tipSize: 0,
        css: null
    };
    balloonSetting.contents = balloonDiv.html();
    target.showBalloon(balloonSetting);
</script>

但是，气球是固定的，不会像下面的 gif 那样跟随“底部”div。

https://gfycat.com/CleverGenuineDoe

我想要一个气球跟随“底部”div。

但是 'Bottom' div cat 不会改变位置，因为 position:fixed 是一个规范。

我应该解决什么？

Answer 1

使气球的位置也固定。

 .my-balloon {
  position: fixed !important;
}

在Javascript中添加以下内容

$.balloon.defaults.classname = "my-balloon";
$.balloon.defaults.css = null;

示例代码可以在下面找到

https://plnkr.co/edit/QmLfx2uH9WDX2eo06PcZ?p=preview