Анимированный заголовок с jquery на пользовательской прокрутке

0

У меня есть следующий код, который позволяет мне добавлять и удалять класс, когда пользователь достигает определенной точки прокрутки страницы, и их, я хочу анимировать заголовок

 $(document).scroll(function (e) {
var value = $(this).scrollTop();
if (value > 150) {
    $( "body" ).addClass( "scroll" );
    $( "header.head" ).stop().animate({top:'-30px'}); 
 }
else {
    $( "body" ).removeClass( "scroll" );
    $("header.head" ).stop().animate({top:'0px'});
 }

моя проблема в том, что начальная анимация (сверху: -30px) работает идеально, но они, когда я прокручиваю вверх, сверху: 0px не работает. а также, когда я прокручиваю вверх, а затем возвращаюсь назад, верх: -30px не повторяется

вы можете увидеть это здесь [образец] http://www.pabloscillia.com.ar/clientes/yumyum/ 1

мое намерение состоит в том, что при> 150 выполните анимацию, а затем, когда пользователь <150 выполняет другой (также не знает, почему анимация иногда длиннее, а иногда и короче)

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

Теги:

2 ответа

0

Дайте заголовку два класса, по умолчанию и исправлены, добавьте класс по умолчанию в заголовок <header class="default"> и напишите класс .fixed {...} в CSS для стилизации заголовка, когда он исправлен. Здесь FIDDLE

<header class="default"></header>


header {
  background: #555;
  width: 100%;
  height: 120px;
}
.default {
  /* Add some properties to defaut if you wish */
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
}


$(function() {

  var header = $('header');
  var headOff = header.offset();

  $(window).scroll(function() {

    if($(this).scrollTop() > 150 + headOff.top && header.hasClass('default')) {
      header.fadeOut('fast', function() {
        $(this).removeClass('default').addClass('fixed').fadeIn('fast').animate({ height: '70px'}, 350);
      });
    } 
    else if($(this).scrollTop() <= 150 + headOff.top && header.hasClass('fixed')) {
      header.fadeOut('fast', function() {
        $(this).removeClass('fixed').addClass('default').fadeIn('fast').animate({ height: '120px'}, 350);
      });
    }
  });

});
Поделиться
  • 0
    Скрипка обновлена ...
0

Замените код следующим:

var $head = $("header.head"),
    $body = $("body"),current=0;

$(document).scroll(function (e) {
    var value = $(this).scrollTop();
    if (value > 150) {
        if (current==1) return;
        current=1;
        $head.stop();
        $body.addClass("scroll");
        $head.css({top: -150});
        $head.animate({
            top: '-30'
        },"fast");
    } else {
        if (current==2) return;
        current=2;
        $head.stop().animate({
            top: '-150'
        }, "fast",endScrollClass);
    }
});

function endScrollClass() {
    $body.removeClass("scroll");
    $head.css('top',0)
}

это запустит endScrollClass в конце анимации(), а не запускает анимацию каждый раз и т.д., я сделал скрипку здесь;

Поделиться
  • 0
    это делает конечную анимацию, но не выполняет начальную анимацию
  • 0
    хорошо, я проверил, stop () должен работать для вас, также я думаю, что вы должны пометить состояние заголовка, чтобы не делать никакой информации на каждом свитке
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню