Javascript 使用prototype JS浮动小部件/横幅

我使用jQuery中的原件创建了一个脚本：

但是当输入prototype JS时，它不能正常工作。 严格来说，它没有正确计算上下高度

有什么想法吗？我附加了代码和链接以查看活动脚本

网上问题：

原型：

document.observe('dom:loaded', function() {
    Element.addMethods({
        floatingWidget: function(el, classes) {
            var $this       = $(el),
            $parent         = $this.getOffsetParent(),
            $window         = $(window),
            top             = $this.positionedOffset().top - parseFloat($this.getStyle('marginTop').replace(/auto/, 0)),
            bottom          = $parent.positionedOffset().top + $parent.getHeight() - $this.getHeight();

            if ($parent.getHeight() > $this.getHeight()) {
                Event.observe($window, 'scroll', function (e) {
                    var y = document.viewport.getScrollOffsets().top;
                    if (y > top) {
                        $this.addClassName(classes.floatingClass);
                        if (y > bottom) {
                            $this.removeClassName(classes.floatingClass).addClassName(classes.pinnedBottomClass);
                        } else {
                            $this.removeClassName(classes.pinnedBottomClass);
                        }
                    } else {
                        $this.removeClassName(classes.floatingClass);
                    }
                });
            }
            return el;
        }
    });

    $('floating-widget').floatingWidget({
        floatingClass: 'floating',
        pinnedBottomClass: 'pinned-bottom'
    });
});

---

Prototypejs相当于jQuery的

offset（）

是

cumulativeOffset（）

，相当于

outerHeight（）

是

measure（'margin-box-height'）

（可以使用Element.Layout对象进行优化）。因此，您的代码应该如下所示：

floatingWidget: function(el, classes) {
    var $this        = $(el),
        $parent      = $this.getOffsetParent(),
        $window      = $(window),
        top          = $this.cumulativeOffset().top - $this.measure('margin-top'),
        bottom       = $parent.cumulativeOffset().top + $parent.getHeight() - $this.measure('margin-box-height');

if ($parent.getHeight() > $this.measure('margin-box-height')) {
...

---

Prototypejs相当于jQuery的

offset（）

是

cumulativeOffset（）

，相当于

outerHeight（）

是

measure（'margin-box-height'）

（可以使用Element.Layout对象进行优化）。因此，您的代码应该如下所示：

floatingWidget: function(el, classes) {
    var $this        = $(el),
        $parent      = $this.getOffsetParent(),
        $window      = $(window),
        top          = $this.cumulativeOffset().top - $this.measure('margin-top'),
        bottom       = $parent.cumulativeOffset().top + $parent.getHeight() - $this.measure('margin-box-height');

if ($parent.getHeight() > $this.measure('margin-box-height')) {
...