Header Background on Scroll

Description

change header background color on scroll over specific theme color
view demo – password: abc
buy me a coffee

#1. Install Code

#1.1. Use this code to Code Injection > Footer

If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

<!-- 07.26c06v9 Header Background on Scroll -->
<script>
window.HeaderBgConfig = {
  headerId: 'header',
  bgTarget: '',
  themeColors: {
    'white':          'red', // LIGHTEST 1
    'white-bold':     'green', // LIGHTEST 2
    'light':          'violet', // LIGHT 1
    'light-bold':     'brown', // LIGHT 2
    'bright-inverse': 'yellow', // BRIGHT 1
    'bright':         'orange', // BRIGHT 2
    'dark':           'black', // DARK 1
    'dark-bold':      'white', // DARK 2
    'black':          'navy', // DARKEST 1
    'black-bold':     'blue'  // DARKEST 2
  }
};
</script>
<script src="https://code.beaverhero.com/header/0726c06v9headerbgonscroll.js"></script>

#1.2. You can update color here

You can use color name or hex color

#2. Customize

nothing now

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit Site Footer

Add a Markdown Block

Add this code into Markdown Block

<script>
window.HeaderBgConfig = {
  headerId: 'header',
  bgTarget: '',
  themeColors: {
    'white':          'red', // LIGHTEST 1
    'white-bold':     'green', // LIGHTEST 2
    'light':          'violet', // LIGHT 1
    'light-bold':     'brown', // LIGHT 2
    'bright-inverse': 'yellow', // BRIGHT 1
    'bright':         'orange', // BRIGHT 2
    'dark':           'black', // DARK 1
    'dark-bold':      'white', // DARK 2
    'black':          'navy', // DARKEST 1
    'black-bold':     'blue'  // DARKEST 2
  }
};
</script>
<script src="https://code.beaverhero.com/header/0726c06v9headerbgonscroll.js"></script>