jquery - Hide header on scroll down,show it on scroll up(not working) -
i have problem,which showed yesterday,after added new div page elements (wrapper) make slide , push effect on mobile menu design.after made div , fixed overflows , stuff,i noticed header function isn't working anymore..if know wrong please correct me,i paste header jquery , style.if need info wrapper div,just give info need me.thanks !
$(document).ready(function($) { "use strict"; var mql = 1170; //primary navigation slide-in effect if($(window).width() > mql) { var headerheight = $('.site-header').height(); $(window).on('scroll', { previoustop: 0 }, function () { var currenttop = $(window).scrolltop(); //check if user scrolling if (currenttop < this.previoustop ) { //if scrolling up... if (currenttop > 0 && $('.site-header').hasclass('is-fixed')) { $('.site-header').addclass('is-visible'); } else { $('.site-header').removeclass('is-visible is-fixed'); } } else { //if scrolling down... $('.site-header').removeclass('is-visible'); if( currenttop > headerheight && !$('.site-header').hasclass('is-fixed')) $('.site-header').addclass('is-fixed'); } this.previoustop = currenttop; }); }
.admin-bar .site-header { top: -80px; } .admin-bar .site-header.is-fixed { top: -160px; } .site-header { position:absolute; top: 0; left: 0; right:0; height: 80px; z-index: 4; border-bottom: 1px solid #eee; } @media screen , (min-width: 40em) { .site-header { -webkit-transition: background-color 0.3s; -moz-transition: background-color 0.3s; transition: background-color 0.3s; /* force hardware acceleration in webkit */ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .site-header.is-fixed { /* when user scrolls down, hide header right above viewport */ position: fixed; top: -80px; background-color: rgba(255, 255, 255, 0.8); -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; } .site-header.is-visible { /* if user changes scrolling direction, show header */ -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } .site-header.menu-is-open { /* add background color header when navigation open */ background-color: transparent; } }
<header id="masthead" class="site-header" role="banner"> <span class="mobile-icon"></span> <div class="site-branding"> <!--logo , branding script,which think uselless problem,so won't show slow --> <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1><?php endif; ?> </div>
it giving me error here ;/
Comments
Post a Comment