高幻灯片，自动跟随滚动 [英] Highslide, Auto follow scroll

问题描述

我正在寻找解决方案/解决方案，但发现了以下主题: http://highslide.com/forum/viewtopic.php?t=3030

I was looking for a fix/solution for that and found this topic: http://highslide.com/forum/viewtopic.php?t=3030

 function fixElement(el) {
    var stl = el.style;
    stl.position = 'fixed';
    stl.top = (parseInt(stl.top) - hs.page.scrollTop) +'px';
    stl.left = (parseInt(stl.left) - hs.page.scrollLeft) +'px';
}
function unfixElement(el) {
   var stl = el.style;
   stl.position = 'absolute';
   stl.top = (parseInt(stl.top) + hs.page.scrollTop) +'px';
   stl.left = (parseInt(stl.left) + hs.page.scrollLeft) +'px';
}

if (!hs.ie || hs.ieVersion() > 6) {
    hs.Expander.prototype.onAfterExpand = function() {
       fixElement (this.wrapper);
      if (this.outline) fixElement(this.outline.table);
   };

    hs.Expander.prototype.onBeforeClose = function() {
       unfixElement (this.wrapper);
      if (this.outline) unfixElement(this.outline.table);
   };
}

在论坛主题中找到了一个小技巧，但是该技巧在我尝试过的任何Internet Explorer(IE7，IE8和IE9)上均不起作用.

Got a small hack on the forum topic, but the hack does not work on any Internet Explorer that I tried (IE7, IE8 and IE9).

有人可以对hack进行修复"以使其在IE上正常工作吗?

Does anyone has a "fix" on the hack to make it work on IE?

我认为这与代码的这一部分，这种情况有关:

I think it's something related on this part of the code, this condition:

if(！hs.ie || hs.ieVersion()> 6)

if (!hs.ie || hs.ieVersion() > 6)

我删除了它并起作用了，但是也许可以更改此代码.

I removed and it worked, but maybe this code could be changed.

谢谢.

推荐答案

下面的代码是您所需要的.实时演示: http://www.highslide.com/studies/position-fixed.html
注意:需要highslide-full.js

The below code is what you need. Live demo: http://www.highslide.com/studies/position-fixed.html
Note: requires highslide-full.js

    // Highslide fixed popup mod. Requires the "Events" component.
    if (!hs.ie || hs.uaVersion > 6) hs.extend ( hs.Expander.prototype, {
      fix: function(on) {
        var sign = on ? -1 : 1,
          stl = this.wrapper.style;

        if (!on) hs.getPageSize(); // recalculate scroll positions


        hs.setStyles (this.wrapper, {
          position: on ? 'fixed' : 'absolute',
          zoom: 1, // IE7 hasLayout bug,
          left: (parseInt(stl.left) + sign * hs.page.scrollLeft) +'px',
          top: (parseInt(stl.top) + sign * hs.page.scrollTop) +'px'
        });

        if (this.outline) {
          stl = this.outline.table.style;
          hs.setStyles (this.outline.table, {
            position: on ? 'fixed' : 'absolute',
            zoom: 1, // IE7 hasLayout bug,
            left: (parseInt(stl.left) + sign * hs.page.scrollLeft) +'px',
            top: (parseInt(stl.top) + sign * hs.page.scrollTop) +'px'
          });

        }
        this.fixed = on; // flag for use on dragging
      },
      onAfterExpand: function() {
          this.fix(true); // fix the popup to viewport coordinates
      },

      onBeforeClose: function() {
        this.fix(false); // unfix to get the animation right
      },

        onDrop: function() {
          this.fix(true); // fix it again after dragging
      },

      onDrag: function(sender, args) {
        //if (this.fixed) { // only unfix it on the first drag event
          this.fix(true);
        //}
      }

    });

这篇关于高幻灯片，自动跟随滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！