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

我有一个固定的元素（因为该元素具有保持固定在某个位置）具有这些属性：如何在固定元素上设置IntroJS步骤？

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的突出显示的区域将永远不适合我想要突出显示的区域。

来源

2016-06-07 thadeuszlay

给一个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. 
     } 
    } 
});

来源

2016-06-07 11:05:47 sudhirk496

这正是我所做的，结果是我在我的问题中显示的方式。 – thadeuszlay

可能是“div＃fooId”元素选择出错。看看编辑后的代码是否适合你。 – sudhirk496

它的工作原理，但你也必须添加一个“position：fixed”，即'overlay [i] .style.position ='fixed';' （否则，如果你按下一个和上一个按钮，覆盖失去焦点。）如果你想将这个添加到你的答案，那么我会接受你的解决方案。 – thadeuszlay

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

回答

相关问题