Question

我可调整大小的头脚本停止了视差部分的实现。我不知道自己在做什么错。

如您在CSS中所见，main-header在向下滚动时需要具有不同的背景颜色和较小的字体大小。

我已经在玩shrinkOn了，但这没有任何效果。

为您提供信息，该脚本在100％静态页面上正常运行。

这是在Wordpress上。

function resizeHeaderOnScroll() {
  const distanceY = window.pageYOffset || document.documentElement.scrollTop,
  shrinkOn = 200,
  headerEl = document.getElementById('main-header');
  
  if (distanceY > shrinkOn) {
    headerEl.classList.add("fixed-header");
  } else {
    headerEl.classList.remove("fixed-header");
  }
}

window.addEventListener('scroll', resizeHeaderOnScroll);

#main-header > div{z-index: 99;text-align: center;}
#main-header{position: fixed;z-index: 99999;width: 100%;line-height: 23px;top: 0;}
#main-header {box-shadow: none;-webkit-transition: background-color .4s,color .4s,transform .4s,opacity .4s ease-in-out;-moz-transition: background-color .4s,color .4s,transform .4s,opacity .4s ease-in-out;transition: background-color .4s,color .4s,transform .4s,opacity .4s ease-in-out;}
#main-header, #main-header .nav li ul{background-color: rgba(255,255,255,0);}
#top-navigation{padding-top: 33px;float: none;-webkit-transition: all .4s ease-in-out;-moz-transition: all .4s ease-in-out;transition: all .4s ease-in-out;}
#top-menu, nav#top-meny-nav{float: left;}
#top-menu, #top-menu-nav{line-height: 0;display: inline-block;}
#top-menu li{display: inline-block;padding-right: 22px;font-size: 14px;word-wrap: break-word;color: #c2b697;}
.nav li{position: relative;line-height: 1em;}
#top-menu a{position: relative;text-decoration: none;}
#top-menu li a{font-size: 16px;font-weight: bold;color: #c2b697;line-height: 9px;padding: 13px 16px!important;-webkit-border-radius: 5px;-moz-border-radius: 50px;display: block;transition: all .5s ease;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;}
#main-header #top-menu li.current-menu-item a{color: #c2b697;line-height: 9px;padding: 13px 16px!important;-webkit-border-radius: 5px;-moz-border-radius: 50px;display: block;transition: all .5s ease;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;border: 1px solid #c2b697;}

@media only screen and (min-width: 981px) {
	.fixed-header#main-header{background-color: #424b59;padding-bottom: 12px}
	.fixed-header .logo_container{height: 0;opacity: 0;-webkit-transition: all .4s ease-in-out;-moz-transition: all .4s ease-in-out;transition: all .4s ease-in-out;}
	.fixed-header #top-navigation{padding-top: 20px;}
	.fixed-header#main-header #top-menu li a {font-size: 14px;}
	#top-navigation{padding: 35px 0 0 0;}
	#page-container{padding-top: 0!important;-webkit-transition: none;-moz-transition: none;transition: none;}
}




.wrapper {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 2px;
}
.section {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-shadow: 0 0 5px #000;
}
.section.footer {
	height: 25vh;
  background-color: #424b59;
}
#footer-bottom {
  text-align: center;
  background-color: #c2b697;
}
.section.sec2 {
  background-color: #eee;
}
.parallax::after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateZ(-1px) scale(1.5);

  background-size: 100%;
  z-index: -1;
}
.static {
  background: white;
}
.bg1::after {
  background-image: url('https://placekitten.com/g/900/700');
}
.bg2::after {
  background-image: url('https://placekitten.com/g/800/600');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="author" content="">
	<link rel="profile" href="https://gmpg.org/xfn/11">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
	<div class="page-container">
	<header id="main-header">
		<div class="container">
			<div id="top-navigation">
				<nav id="top-menu-nav">
					<ul id="top-menu" class="nav">
						<li id="menu-item-45" class="main-home">
							<a href="#">Home</a>
						</li>
						<li id="menu-item-19" class="main-hoe-werken-we">
							<a href="#">Hoe werken we</a>
						</li>
						<li id="menu-item-31" class="main-veelgestelde-vragen">
							<a href="@">Veelgestelde vragen</a>
						</li>
						<li id="menu-item-28" class="main-over-ons">
							<a href="#">Over ons</a>
						</li>
						<li id="menu-item-16" class="main-contact">
							<a href="#">Contact</a>
						</li>
					</ul>
				</nav>
			</div>
		</div>
	</header>
  <?php 
/* Template name: para page */
get_header(leeg); ?>
<main class="wrapper">
  <section class="section parallax bg1">
    <h1>Parallax bg1</hi>
  </section>
  <section class="section static">
    <h1>Static 1</h1>
  </section>
    <section class="section static sec2">
    <h1>Static 2</h1>
  </section>
  <section class="section parallax bg2">
    <h1>Parallax bg2</h1>
  </section>
  <section class="section static">
    <h1>Static 3</h1>
  </section>
<?php get_footer(leeg); ?>
				<footer id="main-footer">
					<div class="section footer">
						<h1>Main Footer</h1>
					</div>

					<div id="footer-bottom">
						<div class="container clearfix">
							<div id="footer-info">Bottom Footer</div>
						</div>
					</div>
				</footer><!-- #main-footer -->
			</main>
		</div><!-- #page-container -->
		<?php wp_footer();?>
	</body>
</html>

缩小页眉距离未设置

0 个答案: