Change Header CSS Upon Scrolling Down

Change header CSS upon scrolling down

It's not possible via CSS alone since CSS cannot select the scroll top. It's very easy to do via javascript, though.

$(window).on("scroll", function () {
    if ($(this).scrollTop() > 100) {
        $("#header").addClass("not-transparent");
    }
    else {
        $("#header").removeClass("not-transparent");
    }
});

CSS Header effect (change background and color) when scrolling down

So i redid it with some Javascript.
This effect is awesome, feel free to improve it if you like!
Is this possible to accomplish without Javascript?

const secondBlock = document.getElementById('content2')const header = document.getElementsByTagName('header')const headerHeight = 61
function setHeader () {  const scrollPoint = window.pageYOffset + headerHeight
  let blockPoint = 61 - (scrollPoint - secondBlock.offsetTop)  if (blockPoint <= 0) { blockPoint = 0 }
  if (scrollPoint > secondBlock.offsetTop) {    header[0].style = `max-height: ${blockPoint}px;`  } else {    header[0].style = `max-height: ${headerHeight}px;`  }  window.requestAnimationFrame(setHeader)}
window.requestAnimationFrame(setHeader)

* {  box-sizing: border-box;  margin: 0;  padding: 0;}
header {  display: block;  font-size: 20pt;  height: 61px;  line-height: 61px;  padding-left: 10px;  position: fixed;  top: 0;  width: 100%;}
header#first {  background: #8292C3;  color: #000;  overflow: hidden;  z-index: 10;}
header#second {  background: #82C3B9;  color: #fff;  z-index: 9;}
section {  height: 500px;  padding: 100px 10px;  position: relative;}
#content1 {  background: #96A6D5;}
#content2 {  background: #99D6CC;}

<header id='first'>Logo - <small>scroll down to see the magic!</small></header><header id='second'>Logo - <small>scroll down to see the magic! COOL!</small></header>
<section id='content1'>  <h1>Content</h1>  <p>Goes here!</p></section><section id='content2'>  <h1>Content</h1>  <p>Goes here!</p></section>

How to change entire header on scroll

If you inspect the solewoood website you can get an idea of how they've implemented the header.

When the page is at the top, there is this CSS for the header div:

<div class="header">

.header {
    position: fixed;
    transition: all 500ms ease 0s;
    width: 100%;
    z-index: 1000;
}

And when you scroll down, the .header_bar CSS class is added to the div as well:

<div class="header header_bar">

.header_bar {
    background-color: #FFFFFF;
    border-bottom: 1px solid #E5E5E5;
}

.header {
    position: fixed;
    transition: all 500ms ease 0s;
    width: 100%;
    z-index: 1000;
}

There are a few other things that are also changed when the user scrolls down from the top (logo, text colour, etc.), but you get the idea.

If you are unsure how to detect if the user is at the top of the page, see here.

EDIT:

In response to your comment, try using jQuery's .toggleClass() with 2 parameters.

For example:

$(window).scroll(function(e){
    $el = $('.header');
    $el.toggleClass('header_bar', $(this).scrollTop() > 0); 
}); 

How to create a header that changes as you scroll down the page?

Here is a generic solution.

This involves having multiple headers (which can have totally different content inside) from which you selectively display one depending on the scroll position. Each header element will have a data-visible-range attribute that defines the min and max scroll positions when it should be displayed.

Demo: http://jsfiddle.net/cydfh2s6/1/

HTML

<div class="header header-1" data-visible-range="0-100">Header 1</div>
<div class="header header-2" data-visible-range="101-500">Header 2</div>
<div class="header header-3" data-visible-range="501-">Header 3</div>
<div class="body">BODY</div>

CSS

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
}
.header-1 {
    background-color: yellow;
    display: block; /* header 1 is visible by default */
}
.header-2 {
    background-color: red;
}
.header-3 {
    background-color: green;
}
.body {
    padding-top: 50px;
    height: 2000px;   
}

JS

$(window).scroll(function() {
    var scrollTop = $(this).scrollTop();
    var headerToDisplay = false;
    $('.header[data-visible-range]').each(function() {
        var range = $(this).data('visible-range').split('-');
        range[0] = range[0] ? parseInt(range[0], 10) : 0;
        range[1] = range[1] ? parseInt(range[1], 10) : $(document).height();
        if(scrollTop >= range[0] && scrollTop <= range[1]) {
            headerToDisplay = $(this);
            return false;
        }
    });
    if(headerToDisplay && !headerToDisplay.is(':visible')) {
        $('.header[data-visible-range]').hide();
        headerToDisplay.show();
    }
});

Change css header after scrolling

Assuming you want to change the CSS after scrolling beyond a certain point, and then revert the CSS once you've scrolled back to a certain point, with jQuery:

$(window).scroll(function() {

    //After scrolling 100px from the top...
    if ( $(window).scrollTop() >= 100 ) {
        $('#logo').css('display', 'none');
        $('#menuheader').css('margin', '65px auto 0');

    //Otherwise remove inline styles and thereby revert to original stying
    } else {
        $('#logo, #menuheader').attr('style', '');

    }
});

Then all you need to do is swap out 100 with whatever point (how many pixels down from the top, while scrolling) you want the CSS to be swapped at.

http://jsfiddle.net/dJh8w/4/

How to change header background on scroll down?

use following code snippet, working fine in the demo website

jQuery(document).scroll(function(){
    if(jQuery(this).scrollTop() > 300)
    {   
       jQuery('#navigation').css({"background":"red"});
    } else {
       jQuery('#navigation').css({"background":"transparent"});
    }
});

---

Related Topics