向下滚动隐藏标题,向上滚动显示(不工作)

时间:2016-11-17 15:43:43

标签: jquery html css

我有一个问题,昨天显示,我添加了一个新的div到我的所有页面元素(包装),以在我的移动菜单设计上制作幻灯片和推动效果。我做了div并修复了所有溢出和东西,我注意到我的标题功能不再工作了。如果有人知道我错在哪里请纠正我,我只会粘贴标题jQuery和Style.If你需要任何信息包装div,只是说我会给你什么所有你需要帮助我的信息。谢谢!

$(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 is scrolling up
		    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 and (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 the user scrolls down, we hide the header right above the 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 the user changes the scrolling direction, we show the 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 a background color to the header when the navigation is open */
    background-color: transparent;
  }
}
<header id="masthead" class="site-header" role="banner">
<span class="mobile-icon"></span>
			<div class="site-branding">
				<!--Logo and branding script,which i think it is uselless for my problem,so i won't show it to slow you -->
				    <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1><?php endif; ?>				
		</div>

即使在这里也给我错误; /

0 个答案:

没有答案