Make a header appear only after a scroll

  • Hi fellas,

    I’m working on a website where I want the header to appear only after the user starts scrolling to the next part of the page (it’s a one page theme called Corporate). It should disappear when the user scrolls back up the first page as well.

    Any ideas?

Viewing 4 replies - 1 through 4 (of 4 total)

  • Try this code

    <script type="text/javascript">
	$(window).scroll(function(){
		var p = $( ".header-after-div-class" );
		var position = p.position();
		if ($(this).scrollTop() > position.top) {
			$('.header').addClass('show');
		} else {
			$('.header').removeClass('hide');
		}
	});
</script>
    Thread Starter bobwiebes

    (@bobwiebes)

    Thanks! In what file do I put this?

    If your theme have jquery library file you can put this footer.php

    If you don’t have jquery library 

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
	$(window).scroll(function(){
		var p = $( ".header-after-div-class" );
		var position = p.position();
		if ($(this).scrollTop() > position.top) {
			$('.header').addClass('show');
		} else {
			$('.header').removeClass('hide');
		}
	});
</script>

    And

    1. Add class for just after div tag ‘header-after-div-class’

    2. Add class for header container ‘header’

    All the very best

    Thread Starter bobwiebes

    (@bobwiebes)

    Where do I add the class? Same php file?

    I’m sorry for my ignorance, webscripting classes are way in the past.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Make a header appear only after a scroll’ is closed to new replies.