javascript - 如何在固定元素上设置 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

给元素一个id并在introJs步骤中

步骤:[ { 元素:“#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.
        }
    }
});