如何在固定元素上设置 IntroJS 步骤？

Question

我得到了一个具有以下属性的固定元素（因为该元素必须固定在某个位置）：

style="position: fixed; width: 270px; right: 60px; height: 500px;"

每当我按 introJS 步骤时，它会显示突出显示的区域有点偏离：

我如何称呼 IntroJS：

  var intro = introJs(); 
  var options_before = {

    steps: [
      {
        element: ".bar",
        intro: "this is step 1"
      },
      {
        element: "div#fooId",
        intro: "Why does step 2 look so weird?="
      }
    ]
  }

  intro.setOptions(options_before);
  intro.start();

我尝试重新定位（更改 top 和 margin 属性）并调整该元素的大小，但是 introJS 的突出显示区域永远不会适合我想要突出显示的区域。

Answer 1

为元素和 introJs 步骤提供一个 id

步骤：[ { 元素：“#yourID”， 简介：“你的描述” } ]

在调用 intro.start() 之前试试这个。

intro.onafterchange(function(targetElement) {
    if(this._currentStep == 1){
        overlay = document.getElementsByClassName("introjs-fixedTooltip");
        for(i=0; i<overlay.length; i++) {
            overlay[i].style.left = '10px';
            overlay[i].style.right = '10px';
            overlay[i].style.position = 'fixed';
            //Set css properties like this.
        }
    }
});