CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user11346382
user11346382

Reputation: 49

Header shrinks on scroll but flickering occurs when scrollind to the changing point

I´m building a website and I have a sticky header, that shrinks after scrolling past the window height. I tried two different versions, one with Vanilla-JS and one with jQuery. Both work, but the Problem is, that it starts flickering if you slowly scroll right to the point where I defined it to change. I hope with the gif it´s clear what I mean by this.
enter image description here

I read, that the "sticky-position" of the header can cause problems, but I couldn´t find anything about flickering right at or right before the changing point. I´d prefer as solution with Vanilla-JS over jQuery cause I rarely know about it, but if it´s only possible with jQuery thats alrigt of course.

Vanilla-JS Version:

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 version:

$(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>

Upvotes: 1

Views: 1671

Answers (2)

Chooobee
Chooobee

Reputation: 1

// SPLIT IT TO 2 SCRIPTS, IT WORKED FOR ME (THE DISPLAY CANT BE TRANSITIONED)

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

    }
  });

Upvotes: 0

chander shekhar
chander shekhar

Reputation: 425

Please check this. may be the problem is headerScrolled height when element reach here height reduce and if and else condition conflict. I used here a element that placed where when you want add a class in your header.

$(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>

Upvotes: 1

Related Questions