Changing background color on scroll using jQuery

Question

Changing background color on scroll using jQuery

Looking to create a cool effect where the background color of a fixed header changes as the user scrolls down a full-page block website. Managed to get it mostly working in this Pen, but struggling with determining how much has been scrolled to trigger the change.

A bit more detail: Need the switch to happen at 400px of scroll. The different background colors are stored in an array for easy fetching. Here's my jQuery code snippet:

$(document).ready(function(){
  var bgArray = ["#252525","#333333","#454545","#777777"];  
  var scrollHeight = 400;
  var scrolled = $(window).scrollTop(); // What does this exactly measure?

  $(window).scroll(function() { // Can these conditions be combined into one?
    if(scrolled < scrollHeight) {
      $('header').css('background', bgArray[0]);
    }
    if(scrolled > scrollHeight) { // i.e more than 400px
      $('header').css('background', bgArray[1]);
    }
    // and so on (800, 1200...)
  })
})

Check out the Pen for the complete code. Any ideas or suggestions would be really helpful!

javascript jquery html css scroll

Answer 1

Answer №1

Newly Updated Technique (2019)

In order to dynamically change the background of the header based on the visible block below it while scrolling, follow these steps:

Since the header has a fixed position, you can calculate the window scroll amount using $header.offset().top,
The index of the current block in view is determined by dividing the scroll amount by the height of each block,

To adjust for the header's height, use the formula:

Math.floor(($header.offset().top + headerHeight) / sectionHeight)

.

Take a look at the simplified demonstration provided below:

$(function() {
  var $header = $('header'),
    $window = $(window),
    bgArray = ["#252525", "red", "blue", "green"],
    headerHeight = 50,
    sectionHeight = 400;

  $window.scroll(function() {
    $header.css('background', bgArray[Math.floor(($header.offset().top + headerHeight)
        / sectionHeight)]);
  });
});

:root {
  --header: 50px; /* header height */
  --block: 400px; /* block height */
}

* {
  box-sizing: border-box; /* include padding in width / height calculations */
}

... (CSS code continues here)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
... (HTML elements continue here) ...

Original Approach

The initial solution involves determining the visibility of each block relative to the window scroll using jQuery functions. By comparing offsets and heights, the script changes the header color when entering different blocks - refer to the demo:

$(document).ready(function() {
  var $header = $('header'),
    $window = $(window),
    bgArray = ["#252525", "#333333", "#454545", "#777777"],
    headerHeight = $header.outerHeight();

  $window.scroll(function() {
    for (var i = 1; i < 5; i++) {
      if ($window.scrollTop() + headerHeight > $('.block-' + i).offset().top) {
        $header.css('background', bgArray[i - 1]);
      }
    }
  });
});

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
body {
  font-family: 'Roboto', sans-serif;
  ... (CSS styling continues) ...
}

... (CSS styling continues) ...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
... (HTML elements continue here) ...

It's worth noting that this method iterates through sections unnecessarily during every scroll update, leading to potential performance concerns.

Answer 2

Newly Updated Technique (2019)

In order to dynamically change the background of the header based on the visible block below it while scrolling, follow these steps:

Since the header has a fixed position, you can calculate the window scroll amount using $header.offset().top,
The index of the current block in view is determined by dividing the scroll amount by the height of each block,

To adjust for the header's height, use the formula:

Math.floor(($header.offset().top + headerHeight) / sectionHeight)

.

Take a look at the simplified demonstration provided below:

$(function() {
  var $header = $('header'),
    $window = $(window),
    bgArray = ["#252525", "red", "blue", "green"],
    headerHeight = 50,
    sectionHeight = 400;

  $window.scroll(function() {
    $header.css('background', bgArray[Math.floor(($header.offset().top + headerHeight)
        / sectionHeight)]);
  });
});

:root {
  --header: 50px; /* header height */
  --block: 400px; /* block height */
}

* {
  box-sizing: border-box; /* include padding in width / height calculations */
}

... (CSS code continues here)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
... (HTML elements continue here) ...

Original Approach

The initial solution involves determining the visibility of each block relative to the window scroll using jQuery functions. By comparing offsets and heights, the script changes the header color when entering different blocks - refer to the demo:

$(document).ready(function() {
  var $header = $('header'),
    $window = $(window),
    bgArray = ["#252525", "#333333", "#454545", "#777777"],
    headerHeight = $header.outerHeight();

  $window.scroll(function() {
    for (var i = 1; i < 5; i++) {
      if ($window.scrollTop() + headerHeight > $('.block-' + i).offset().top) {
        $header.css('background', bgArray[i - 1]);
      }
    }
  });
});

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
body {
  font-family: 'Roboto', sans-serif;
  ... (CSS styling continues) ...
}

... (CSS styling continues) ...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
... (HTML elements continue here) ...

It's worth noting that this method iterates through sections unnecessarily during every scroll update, leading to potential performance concerns.

Answer 3

Answer №2

Instead of using scrolled as a fixed variable, consider incorporating it directly into your condition

By doing this, you will create a dynamic effect for all elements within the wrap div

$(document).ready(function(){
var bgArray = ["#252525","#333333","#454545","#777777"];
$(window).scroll(function() { 
    for(var i = 1; i < bgArray.length; i++) {
      if ($(window).scrollTop() > $('.wrap div:nth-child(' + i + ')').offset().top) {
        $('header').css('background', bgArray[i-1]);        
      }
    }
  });
})

Answer 4

Instead of using scrolled as a fixed variable, consider incorporating it directly into your condition

By doing this, you will create a dynamic effect for all elements within the wrap div

$(document).ready(function(){
var bgArray = ["#252525","#333333","#454545","#777777"];
$(window).scroll(function() { 
    for(var i = 1; i < bgArray.length; i++) {
      if ($(window).scrollTop() > $('.wrap div:nth-child(' + i + ')').offset().top) {
        $('header').css('background', bgArray[i-1]);        
      }
    }
  });
})

Answer 5

Answer №3

Give this a try:

$(document).ready(function(){
  var backgroundColors = ["#252525","#333333","#454545","#777777"];  
  var scrollHeight = 400;

  $(window).scroll(function() {

    var scrolledValue = $(window).scrollTop(); 

    var colorIndex = Number((scrolledValue/scrollHeight).toFixed());

    if(backgroundColors[colorIndex]!=undefined)
        $('header').css('background', backgroundColors[colorIndex]);

  });
})

This code is for adjusting the background color based on scrolling position, make sure to place it inside: $(window).scrollTop()

Answer 6

Give this a try:

$(document).ready(function(){
  var backgroundColors = ["#252525","#333333","#454545","#777777"];  
  var scrollHeight = 400;

  $(window).scroll(function() {

    var scrolledValue = $(window).scrollTop(); 

    var colorIndex = Number((scrolledValue/scrollHeight).toFixed());

    if(backgroundColors[colorIndex]!=undefined)
        $('header').css('background', backgroundColors[colorIndex]);

  });
})

This code is for adjusting the background color based on scrolling position, make sure to place it inside: $(window).scrollTop()

Changing background color on scroll using jQuery

Answer №1

Newly Updated Technique (2019)

Original Approach

Answer №2

Answer №3

Similar questions

Alignment of Table with Form Section

Troubleshooting: Why Laravel 5 VueJS Integration is Failing

Issues with javascript functionality in Internet Explorer version 9 and higher

Execute the function when the control becomes visible

django problem with bootstrap modal

Discover the way to create an HTML button with a mesmerizing transparent effect

Getting URL parameters in VueJS after a page redirect has occurred

Ways to deactivate antd css-dev-only styles

Removing Component Items in a Vue.js v-for Loop

Steps to installing npm on Ubuntu without root access:1. First, download

Struggling with resizing a webcam feed to fit the dimensions of the iframe container?

Issue arises when trying to utilize Ajax on the Fancy Box overlay button click and the functionality does not perform as

Transform Angular Material Table selection color with selection

What is the most efficient way to organize a dynamic array with jQuery?

How can I ensure that my style.scss file effectively interacts with my stylesheet by including imports for "variables", "globals", and "header"?

TypeError: Unable to access the 'classify' property of an object that has not been defined (please save the ml5.js model first)

Incorporate a background image into input fields with Autofill on mobile browsers to override the default yellow background that obscures them

What is the best way to showcase a category on the thumbnail of a WordPress post?

Strategies for reducing the amount of space between cards in Bootstrap 4

Having trouble finding a hyperlink with CSS selectors