使用原型JS的浮动小部件/横幅
Floating widget/banner using the prototype JS
我使用jQuery中的原始文件创建了一个脚本:http://terkel.jp/demo/jquery-floating-widget-plugin.html
但是当输入到原型JS时,它不能正常工作。严格来说,它没有正确计算上下高度。
有什么想法吗?我附上了我的代码和链接来查看活动脚本。
联机问题:http://1.delnik20.cz/
原型:
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')) {
...
相关文章:
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- Dojo不解析自定义小部件的模板html中的小部件声明性
- 在输入字段中将最小金额设置为
- 砌体不能填补小缺口
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 限制javascript变量的最小/最大整数
- HTML5在画布中加载较小的图像并保存实际大小的图像
- 最小化时暂停Javascript动画
- 如何正确实现Jquery多选小部件
- 微笑时间轴小部件添加自定义字段
- 如何在Symfony2中的表单小部件中包含javascript
- 如何将JSON数据源适合Jquery自动完成小部件
- 如果使用javascript函数屏幕太小,我该如何更改HTML文件的背景色
- 通过jquery设置最小高度
- 收听ckeditor小部件事件
- CKEditor如何允许href="javascript:void(0)"在小部件中
- 有没有一种方法可以获得three.js的最小/lite版本
- javascript中两年之间的小时差(带闰年)
- 我什么时候应该把JSON分成更小的部分
- 使用原型JS的浮动小部件/横幅