Масштабирование и изменение элемента изображения с помощью слова в зависимости от положения прокрутки.

Question

Я видел некоторые эффекты прокрутки, например, на сайте Google SketchUp, их баннер изначально «встроен в страницу», а затем он, кажется, выскакивает вверх и остается застрявшим наверху после определенной позиции вниз (прокрутка).

Google Plus, похоже, имеет некоторые специальные эффекты, такие как изменение знака целиком, только когда прокрутка достиг определенной позиции.

Прилагается, что я пытаюсь выполнить. Квадратный логотип находится справа, а затем, когда страница прокручивается вниз, логотип начинает масштабироваться до той же высоты, что и баннер/заголовок/исчезать, а затем становится словом, а не изображением.

Что я здесь рассматриваю? 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'); 
    } 
});