Как правильно сделать плавающий блок при скроллинге?

Question

[maxon76]

На этом сайте есть плавающий хэадер.
Нужно что бы при скроллинге в плавающий хеадер слева дабавлялся логотип.
Я добавил логотип в HTML блок плавающего хеадера, задал display: none; и далее использую такой скрипт:

$(document).ready(function(){
	$(window).scroll(function(){
		if($(window).scrollTop()>200){
			$('.header-bottom .site-branding a img').show()
		}else{
			$('.header-bottom .site-branding a img').hide()
		}
	});
});

Проблема в том, что логотип в плаващем хэадере при скроллинге страницы, появляется и исчезает раньше чем нужно - появляется слишком рано, и исчезает слишком рано. Особенно это заметно при обратном скроллинге, т.е когда логотип должен исчезнуть.
Как это можно исправить? Как нужно доработать скрипт? Потому что ни как не получается подобрать оптимальное значения для scrollTop()>

Answer 1

[xxvxx]

измени 200 на нужное тебе значение, и я лучше бы добавлял класс active

.site-branding {
    opacity: 0;
    transition: .5s;
}
.site-branding.active {
    opacity: 1;
}
.site-branding a{
    height: 0;
    overflow: hidden;
}
.site-branding.active a {
   height: auto;
}

тогда появление будет плавным и верстка прыгать не будет

Comments

[maxon76]

Проблемма в том что не удается за место 200 подобрать нужное значение.
При проктуртке вниз все в порядке. А при прокрутке вверх лого изсчезает слишком рано - какое время плавающий хэдер прокруичвается без логотипа.

Попробовал ваш CSS код. Если его использовать то логотип вообще не повляется при прокрутке.

[xxvxx]

maxon76, Логотип не появляется потому что вы не добавляете класс active, также проблема в том что после того как меню прилипает к верху оно исчезает у вас из тела разметки страницы(надеюсь понятно объяснил) пропадает высота меню, у вас идет прыжок и баннер оказывается под меню, это проблемы верстки скрип отрабатывает нормально, но вообще это все можно сделать на css Пример ютуб

[maxon76]

Оказывается при прокрутке к липкому хэадеру добовлялся класс .minimized.
Я решил проблемму так, на CSS, без JS.

header:not(.minimized) .header-bottom .logo { display:none}