javascript - 标题在滚动时缩小，但当滚动到变化点时会发生闪烁

Question

我正在构建一个网站，我有一个粘性标题，它会在滚动超过窗口高度后缩小。我尝试了两种不同的版本，一种使用 Vanilla-JS，另一种使用 jQuery。两者都有效，但问题是，如果您慢慢向右滚动到我定义它要更改的位置，它就会开始闪烁。我希望 gif 能清楚我的意思。

我读到， header 的“粘性位置”可能会导致问题，但我找不到任何关于在变化点处或之前闪烁的信息。 我更喜欢用 Vanilla-JS 作为解决方案而不是 jQuery 因为我很少知道它，但如果它只能用 jQuery 那当然没问题。

普通 JS 版本:

function header() {
  Y = window.pageYOffset;
  active = window.innerHeight;
  header = document.getElementById('header');

  if (Y > active) {
    header.classList.add("headerScrolled");
  } else {
    header.classList.remove("headerScrolled");
  }
}

window.addEventListener('scroll', header);

.header {
width: 100vw; 
  position: sticky;
  top: 0;
  height: 15vh;
  background-color: blue;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
  z-index: 9999;
}

.headerScrolled {
  background-color: #fff;
  height: 10vh;
  -webkit-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.2);
  -moz-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.2);
  box-shadow: 0 3px 5px rgba(57, 63, 72, 0.2);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}
#s1 {
  height: 100vh;
}
#s2 {
  height: 100vh;
  background-color: gold;
}

  <div class="header" id="header">
        <div class="navigation">
            <a>Link</a>
            <a>Link</a>
            <a>Link</a>
          </div>
        </div>
<section id="s1">
  </section>
<section id="s2">
  </section>
     

jQuery 版本:

$(document).ready(function() {
	$(window).scroll(function() {
  	if($(document).scrollTop() > 200) {
    	$('.header').addClass('headerScrolled');
    }
    else {
    $('.header').removeClass('headerScrolled');

    }
  });


});

.header {
width: 100vw; 
  position: sticky;
  top: 0;
  height: 15vh;
  background-color: blue;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
  z-index: 9999;
}

.headerScrolled {
  background-color: #fff;
  height: 10vh;
  -webkit-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.2);
  -moz-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.2);
  box-shadow: 0 3px 5px rgba(57, 63, 72, 0.2);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}
#s1 {
  height: 100vh;
}
#s2 {
  height: 100vh;
  background-color: gold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header" id="header">
        <div class="navigation">
            <a>Link</a>
            <a>Link</a>
            <a>Link</a>
          </div>
        </div>
<section id="s1">
  </section>
<section id="s2">
  </section>

Answer 1

请检查这个。问题可能是 headerScrolled 高度当元素到达此处时高度降低并且 if 和 else 条件冲突。我在这里使用了一个元素，当你想在你的标题中添加一个类时，它会放置在什么地方。

$(window).scroll(function() {
		var targt = $(".taregt").offset().top;
  	if($(document).scrollTop() > targt) {
    	$('.header').addClass('headerScrolled');
    }
    else {
    $('.header').removeClass('headerScrolled');

    }
  });

.header {
width: 100vw; 
  position: sticky;
  top: 0;
  height: 15vh;
  background-color: blue;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
  z-index: 9999;
}

.headerScrolled {
  background-color: #fff;
  height: 10vh;
  -webkit-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.2);
  -moz-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.2);
  box-shadow: 0 3px 5px rgba(57, 63, 72, 0.2);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}
#s1 {
  height: 100vh;
}
#s2 {
  height: 100vh;
  background-color: gold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="header" id="header">
			<div class="navigation">
				<a>Link</a>
				<a>Link</a>
				<a>Link</a>
			  </div>
			</div>
	<section id="s1">

	  </section>
	<section id="s2">
		<div class="taregt"></div>
	  </section>