如何在固定元素上设置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.
        }
    }
});