Fade in/Ease down sticky header

Мой клиент использует липкий заголовок, который срабатывает после прокрутки определенного расстояния.Fade in/Ease down sticky header

Теперь они хотят, чтобы заголовок загорелся и скользнул на место, как противостоящие просто «появлению», как сейчас.

jQuery не мой сильный костюм, поэтому любая помощь будет замечательной.

Здесь the URL in question и вот текущий jQuery, используемый для липкого заголовка;

$(window).scroll(function() { 

    var headerheight = $("header").height(); 
    var header = $(document).scrollTop(); 

    if (header > height-75) { 
     $('header').addClass('sticky'); 
     $('body').css("padding-top", headerheight); 
     $('.sticky').css('top', 0); 
    } else { 
     $('header').removeClass('sticky'); 
     $('body').css("padding-top", 0); 
     $('header').css('top', 25); 
    } 

});

источник

2013-12-06 Dean Elliott

Вы также можете попробовать добавить «переход: все 300 мс легкости» к классу CSS «sticky». Он не исчезает, но эффект интересен. Если вы добавили '$ ('header'). Css ('opacity', 0 '). AddClass (' sticky '). Css (' opacity ', 1);', он также может вывести затухание. Попробуйте и посмотрите - действительно простое дополнение :) –

@Chris - не совместим с кросс-браузером ... Но может быть: http://stackoverflow.com/questions/11202963/making-css-transition-effects-work -все-все-браузеры Я все еще думаю, что использование jQuery будет лучше обрабатывать все случаи и держать в рамках того, что используется. По моему мнению, для Eizling больше JS, чем CSS в типе деятельности. – digitalextremist

@digitalextremist Намерение состояло в том, чтобы попытаться предложить предложение, а не предоставить подробный и формальный ответ - иначе я бы отправил ответ. Я просто хотел поставить CSS на стол, если OP хочет изучить этот маршрут, они могут. Что касается ослабления роли javascript, я не думаю, что это имеет значение, но я бы склонялся к тому, что это работа CSS, которая предназначена для обработки форматирования презентации. Если бы ослабление было основной деятельностью JS, было бы что-то для этого встроено в язык, вместо того чтобы полагаться на дополнительную библиотеку или писать тысячи строк ванильного скрипта. –

Если ниже исправление не просто падение, концепция решает проблему и будущие случаи, когда «смягчения» необходима. Мы уничтожим элемент и заставим его появляться изящно.

В частности, перед тем addClass('sticky') сделать: $('header').hide() и после того, как вы сделали все ваши эстетические волшебста, сделать $('header').fadeIn('fast') ... то ненужный, что для вашего случая прокрутки назад.

Пример:

$(window).scroll(function() { 
    var headerheight = $("header").height(); 
    var header = $(document).scrollTop(); 

    if (header > height-75) { 
     $('header').hide(); 
     $('header').addClass('sticky'); 
     $('body').css("padding-top", headerheight); 
     $('.sticky').css('top', 0); 
     $('header').fadeIn('fast'); 
    } else { 
     $('header').fadeOut('fast'); 
     $('header').removeClass('sticky'); 
     $('body').css("padding-top", 0); 
     $('header').css('top', 25); 
     $('header').fadeIn('fast'); 
    } 
});

Это будет с одной стороны, быть быстрым, но с другой стороны, быть элегантной и чувствовать себя жидкость. В противном случае, отличный дизайн.

источник

2013-12-06 17:38:23 digitalextremist

Fade in/Ease down sticky header

ответ

Смежные вопросы