Question

当涉及到javascript时，我仍然是一个相对的noob，特别是进入jquery，prototype.js等。我试图复制类似于http://giglocator.com标题（或者，在较小程度上，TechCrunch重新设计的标题）的内容，其中一旦您滚动超过某个点，标题的一部分停留在屏幕上。这可以归结为一旦一个人已经超过xxx像素数，就会将标题代码从相对位置更改为固定位置。我在Header changes as you scroll down (jQuery)找到了vinceh的答案，其中包括他创建的小提琴（http://jsfiddle.net/KEjfe/）。我设法使用以下脚本代码调整他的代码或多或少做一个giglocator类型标题：

$("#body").scroll( function() {
    var value = $(this).scrollTop();
    if ( value > 120 )
        $("#header").css("position", "fixed").css("top", "0");
    else
        $("#header").css("position", "relative").css("top", "120px");
});

所以这很好，除了我试图使用一个使用prototype.js和scriptaculous的论坛软件包。为此加载jquery似乎是浪费（除了其他）。有没有办法转换上面的代码，以便它在原型/ scriptaculous中工作？或者有没有办法加载jquery的scrolltop？

Answer 1

这里基于小提琴是等价的; http://jsfiddle.net/S7gpT/1/

Event.observe("body", "scroll", function() {
    var value = this.scrollTop;
    if ( value > 120 )
        $("header").setStyle({border: "1px solid blue"});
    else
        $("header").setStyle({border: "1px solid green"});
});

它看起来非常相似，因为当谈到DOM时，两个库在功能上是相似的。差异是间接的......

$()使用ID代替CSS选择器，因此不需要#个字符。
事件名称作为字符串传递给observe()，而不是使用专用函数。
scrollTop是元素的现有属性，无需将其包装在另一个函数中。
css()已替换为setStyle()

将jquery转换为prototype.js，以便在向下滚动时将scrollTop等效更改为标题

1 个答案: