Pop up header when scrolling down

Question

I would like to imitate the header of this page. That means:

1) once the page is loaded, the header is inside the promo picture

2) when scrolling down, the header pops up and changes its color

I have not found out how this is accomplished in its code. Does anyone know the mechanism to realise that?

On scroll add a class to the header, within that class add `position:fixed;` and change whatever else you want within the style for that class. Then once the page is scrolled back to the top, remove the class. [How to fix a header on scroll](http://stackoverflow.com/questions/19158559/how-to-fix-a-header-on-scroll) — APAD1, Aug 23 '16 at 17:37
I guess that page uses `jquery.scrollTo`, can we directly call something from `jquery.scrollTo`? For example, its css has `navbar-fixed-top {position:fixed ...`, however I cannot find `navbar-fixed-top` in its `index.html`. — SoftTimur, Aug 23 '16 at 18:11
Take a look at the link I posted to learn how to accomplish this. — APAD1, Aug 23 '16 at 19:16

Carol Skelly · Accepted Answer · 2016-08-23T20:30:56.627

Use the Bootstrap affix component to change the navbar style when the page is scrolled.

<div class="navbar navbar-default navbar-fixed-top" data-spy="affix" data-offset-top="400">


.affix {
  /* fixed navbar style */
}

.affix-top {
  /* navbar style at top */
  background:transparent;
  border-color:transparent;
}

Set the data-offset-top attribute to the pixel height you want the navbar to transition.

Demo http://bootply.com/uldEaDBZOj

score 1 · Answer 2 · answered Aug 23 '16 at 20:43

Hopefully this helps you out.

<style>

/* Initial Styling Applied Here */
header{
}  

/* Wanted Styling While Fixed */
header.fixed{
    position:fixed;
    top:0;
    z-index:100;
}    

</style>

Create your header in HTML (This can be any container, really)

<header></header>

Create your event handler in JS/jQuery

<script>
// On Scroll
$(window).scroll(function(){
    // If we have scrolled more than 10px
    if($(document).scrollTop() > 10){
        // Add class "fixed" to header element
        $('header').addClass('fixed');
    // Otherwise
    }else{
        // If header already has "fixed" class
        if($('header').hasClass('fixed')){
            // Remove said class
            $('header').removeClass('fixed');
        }
    }
});
</script>

score 0 · Answer 3 · answered Dec 20 '19 at 09:46

const body = document.body;
const header = document.querySelector("header");
const scrollUp = "scroll-up";
const scrollDown = "scroll-down";
let lastScroll = 0;

window.addEventListener("scroll", () => {
  const currentScroll = window.pageYOffset;
  if (currentScroll == 0) {
    header.classList.remove(scrollUp);
    return;
  }

  if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {
    // down
    header.classList.remove(scrollUp);
    header.classList.add(scrollDown);
  } else if (
    currentScroll < lastScroll &&
    header.classList.contains(scrollDown)
  ) {
    // up
    header.classList.remove(scrollDown);
    header.classList.add(scrollUp);
  }
  lastScroll = currentScroll;
});

Pop up header when scrolling down

3 Answers3