Как установить шаг 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 attribut es) и изменить размер этого элемента, но выделенная область introJS никогда не будет соответствовать области, которую я хочу занять.

Answer 1

Дайте идентификатор для элемента и 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. 
     } 
    } 
});