«сворачивающаяся» позиция: фиксированный элемент с использованием jquery - PullRequest
Новая
       15

«сворачивающаяся» позиция: фиксированный элемент с использованием jquery

0 голосов
/ 09 марта 2011

Я пытаюсь реализовать эффект, который логотип оказывает на этой странице , где он зафиксирован в верхней части страницы, но при прокрутке вниз видна только его часть, а не целый элемент.

Я нашел множество плагинов jquery, которые будут держать верхнюю часть элемента в верхней части страницы, но ни один не позволит мне настроить, насколько высоко будет оставаться элемент. Мой JavaScript не предназначен для кодирования чего-либо с нуля. У кого-нибудь есть предложения по плагинам, которые могут быть полезны?

1 Ответ

1 голос
/ 09 марта 2011

Вам не нужен плагин для этого.CSS может сохранять логотип фиксированным, и вы можете использовать JavaScript, чтобы изменить отображение элемента, как только пользователь начнет прокручивать страницу.

При условии, что ваш логотип имеет идентификатор логотипа, CSS будет:* 

#logo {
  top: 0;
  position: fixed;
}

Поскольку кажется, что вы используете jQuery, вы можете сделать что-то вроде этого: 

$(function() {

  // gets a reference to the document based on which browser is being used
  var oDoc = $.browser.msie === true ? window : document;

  // event handler for when the user scrolls
  $(oDoc).scroll(function() {

    // if the user is at the top, display the whole image
    if($(this).scrollTop() === 0) {
      $('#logo').css('margin-top', 0);

    // otherwise, pull the image up a single em (200 is arbitrary)
    } else if($(this).scrollTop() > 200) {
      $('#logo').css('margin-top', '-1em');
    }

  });

});
...