根据滚动位置缩放元素并将其从图像更改为单词。

Question

我在 Google SketchUp 的网站上看到了一些滚动效果，他们的横幅最初是 "built into the page" 然后它似乎弹出并在某个位置下降后停留在顶部（滚动）。

Google Plus 似乎也有一些特殊效果，比如一旦滚动到某个位置就完全改变横幅。

附件是我想要完成的。右边是一个方形的logo，然后当页面向下滚动时，logo开始缩放到与banner/header / fade 相同的高度，然后变成文字而不是图像。

我在看什么？ jQuery 还是 javascript？如何跟踪滚动并将两者连接起来？

Answer 1

是你想要达到的吗？

http://jsfiddle.net/agdbd8x6/15/

如果是这样，那就很容易了。如果您使用 jQuery，请附加 'scroll' 事件处理程序并检查当前滚动位置。仅显示零滚动位置的图像：

var img = $('#image');
var txt = $('#text');

$(".container").scroll(function(){                                
    txt.text('Scroll position = ' + $(this).scrollTop());
    var showImage = $(this).scrollTop() == 0;
    if (showImage){
        img.css('display', 'inline');
        txt.hide();
    }
    else{
        img.hide();
        txt.css('display', 'inline-block');
    }
});

根据滚动位置缩放元素并将其从图像更改为单词。

Scale and change an element from an image to a word, depending on scroll position.

html

javascript

css

jquery

scroll