JQuery FadeIn/FadeOut при прокрутке мыши

Мне было интересно, может ли jQuery обрабатывать следующие действия:

Я хотел бы отображать URL-ссылки, когда читатели начинают прокручивать страницу блога Blogspot. Эти ссылки будут оставаться видимыми на 100% все время, пока читатели не прокрутят страницу до верхней позиции (видимость 0%).

Я нашел один jQuery, он здесь.

Но этот работает как прокрутка до верхней части кнопки веб-сайта. Я бы хотел, чтобы мой jQuery работал именно так, но вместо прокрутки вверх по щелчку мыши он перенаправлял читателя на конкретную ссылку URL (по щелчку мыши).

Можно ли сделать это?

Спасибо.


jquery fadein fadeout
person Peter    schedule 13.03.2010    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если вы используете обычные привязки, чтобы щелчок происходил как по обычной ссылке, вы можете сделать это для затухания:

$(function() {
  $(document).scroll(function() {
    if($('body').scrollTop() == 0)
      $("a.hide:visible").fadeOut();
    else 
      $("a.hide:hidden").fadeIn();
  });
});

И этот CSS, поэтому они изначально скрыты:

.hide { display: none; }

Определите свои ссылки следующим образом:

<a class="hide" href="Http://google.com">Google Link</a>

Этот скрипт говорит, что если мы наверху ($('body').scrollTop() == 0), то видимые class="hide" ссылки постепенно исчезают, если мы не наверху, то они появляются. Просто назначьте class="hide" ссылкам, которые вы хотите вести таким образом.

person Nick Craver    schedule 13.03.2010
comment
Спасибо за быстрый ответ. Я сделал это, как вы предложили, поэтому я поставил .hide { display: none; } в CSS и ‹script type='text/javascript'› $(function() { $(document).scroll(function() { if($('body').scrollTop() == 0) $(a .hide:visible).fadeOut(); else $(a.hide:hidden).fadeIn(); }); }); ‹/script› в разделе ‹body› Затем я добавил ссылку ‹a class='hide' href='google. com'›Google Link‹/a› Но ссылка все время была скрыта, независимо от того, как низко я прокручивал. - person Peter; 13.03.2010
comment
@Peter Попробуйте это: $('html, body').scroll( вместо документа. - person Nick Craver; 13.03.2010
comment
Спасибо за ваши усилия, я заменил предложенный вами код, но, к сожалению, получил тот же результат. - person Peter; 14.03.2010