Wie setze ich IntroJS Schritt auf einem festen Element?

Question

bekam ich ein festes Element (weil das Element an einer bestimmten Position fixiert bleiben muss) mit diesen Attributen:

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

Jedes Mal, wenn ich die introJS Schritte drücken durch, es den markierten Bereich ein wenig weg zeigen würde:

Wie nenne ich 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(); 

ich versuchte top und margin Ausprägungs neu zu positionieren (Ändern Es) und die Größe dieses Elements ändern, aber der hervorgehobene Bereich von IntroJS würde niemals zu dem Bereich passen, den ich beleuchten möchte.

Answer 1

eine id Element Geben und in introJs Schritte

Schritte: [ { Element: "#yourID", Intro: "Ihre Beschreibung" } ]

dieses Versuchen Sie, bevor Sie anrufen 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. 
     } 
    } 
});