Offline
İlk önce kullandığımız headera id değeri verelim.Id mız header olsun.
Bu kodu helper_js_globalde <!--XF:JS--> altına ekleyelim.
Aşağıda verdiğim kodu da extra.less şablonuna ekleyin.
Bu kodu helper_js_globalde <!--XF:JS--> altına ekleyelim.
Kod:
<script type="text/javascript">
$(document).ready(function () { 'use strict'; var aktifYukseklik, currentScrollTop = 0, header = $('#header'); $(window).scroll(function () { var scrollYukseklik = $(window).scrollTop(); var headerYukseklik = header.height(); currentScrollTop = scrollYukseklik; if (aktifYukseklik < currentScrollTop && scrollYukseklik > headerYukseklik + headerYukseklik) { header.addClass('slide--up'); } else if (aktifYukseklik > currentScrollTop && !(scrollYukseklik <= headerYukseklik)) { header.removeClass('slide--up'); } aktifYukseklik = currentScrollTop; });
});
</script>Aşağıda verdiğim kodu da extra.less şablonuna ekleyin.
Kod:
#header{
transition: all .3s;
}
.slideUp{
transform: translateY(-80px);
}