How to Implement a Dynamic Background Image Change with JavaScript on Scroll

Can someone help me with changing the background image on my webpage's body when it has been scrolled past a certain point? I've managed to make the initial change, but when scrolling back up, the first background image is still replaced. Being new to JavaScript, any guidance on this would be greatly appreciated!

function changeBackground () {
  var body = document.querySelector("body");
  if (this.scrollY > 1000) { 
    document.body.style.backgroundImage = "url(../../../img/upa/landing/images/bg.jpg)";
  } else { 
    document.body.style.backgroundImage = "url(../../../img/upa/landing/images/bg-2.jpg)";
  }
}

window.addEventListener("scroll", changeBackground , false);
javascriptcss

Answer №1

Give this a shot.

function adjustBackground () {
  document.body.style.backgroundImage = this.scrollY > 1000
     ? "url(../../../img/upa/landing/images/bg.jpg)"
     : "url(../../../img/upa/landing/images/bg-2.jpg)";
}

window.addEventListener("scroll", adjustBackground , false);

In the event of an "else" situation, consider changing the backgroundImage instead of altering the display.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Converting JSON data to an Excel file in an Angular application

I'm working on exporting my JSON data to an XLSX file. Despite successfully exporting it, the format in the Excel file isn't quite right. Below is the code I am using: downloadFile() { let Obj = { "data": [12,123], "date": ["2018-10- ...

javascriptangular

Converting the jQuery $.xajax loadmore feature into a custom XMLHttpRequest JavaScript function

I'm facing challenges while trying to create a XMLHttpRequest loadmore function as compared to using $.ajax. I am uncertain about what I might be missing in my code. Below is the function that is based on a previously working $.ajax version that I ha ...

javascriptajaxwordpressxmlhttprequest

An easy way to activate a toggle function when the page loads in React

I want to create a nice slide-in effect for my sidebar when the user loads the page. My goal is to toggle the state of the Sidebar component from open: false to open: true on load in order to achieve this effect. Unfortunately, it seems that the way I&apo ...

javascriptreactjsmaterial-ui

Ways to shift footer lower if there is a floating element in the div above it

Trying to move my footer to the bottom of the page, regardless of the amount of content above it. After researching online, I came across a solution on this website: However, everything was fine until I added "float: left" to the content div. Suddenly, th ...

css

Implementing Node.JS ajax to update current JSON information

I am seeking assistance in updating data within a JSON file using NODE.JS. Currently, my method adds the data with the same ID as expected. However, upon receiving the data back, it eliminates the last duplicate because it encounters the old value first. I ...

javascriptjsonajaxnode.js

Display a JavaScript object as a table in an HTML document using HTML elements

I am having trouble displaying the results of sorting an associative array in JavaScript in an HTML table without using PHP. The sorting itself is working correctly as I can see the results in the console, but the table is not showing up. Below is the code ...

javascripthtmlarrayshtml-table

What is the significance of including the Angular component selector in HTML?

I'm brand new to Angular and html/html5, so please bear with me if my questions seem basic. I've included a screenshot below: https://i.sstatic.net/UXobT.png Here are the questions on my mind: Q1- The component selector name paproductform is n ...

javascripthtmlangular

Animating range tick movements as the range thumb moves

My custom range input includes a span that displays the range's value and a div with multiple p elements acting as ticks. To create these ticks, I had to use a custom div because using "appearance: none" on the range hides the ticks by default. The ti ...

javascripthtmlcssanimationrangeslider

The Kadwa font's right arrow character appears overly broad

I am having an issue with the Google Font Kadwa in InDesign, specifically when using it to generate a right arrow (→). After loading the font onto my website, I noticed that the arrow appears to be too wide for my liking. @import url('https://fo ...

csswebfontstypographygoogle-fonts

Retrieving event.data from the input handler on a textarea element

I've spent the past few days researching this issue. Here's some context to help explain the goal: I have a textarea and I want it to detect special characters (like @) that I define as part of a dictionary. It should then display an autocomple ...

javascriptjqueryhtml

Is the disable feature for React buttons not functioning properly when incorporating Tailwind CSS?

import React, { useState } from "react"; import facebook from "../UI/icons/facebook.png"; import Button from "../UI/Button/Button"; import Card from "../UI/Card/Card"; import twitter f ...

javascriptreactjstailwind-css

Should the .js file type be omitted in the <script> tag for semantic accuracy?

Upon reviewing some inherited code, I noticed that JavaScript files are being linked in the following format: <script src="/js/scriptfile" type="text/javascript"></script> However, I was expecting to see: <script src="/js/scriptfile.js" ...

javascripthtml

The issue with the datatable row button functionality is not functioning as expected within the

I am facing an issue with my Jade Template code where I am trying to trigger a JavaScript function when a button is clicked on each row. Despite following the documentation for DataTables and Jade, I am unable to figure out what mistake I am making. It see ...

javascripthtmlnode.jspug

JavaScript-based tool for extracting content from Sketch file

My goal is to extract the contents of a .sketch file. I have a file named myfile.sketch. When I rename the file extension to myfile.zip and extract it in Finder, I can see the files inside. However, when I try the same process on the server using Node.js ...

javascriptnode.jsunzipjszip

javascript does not function properly within the UI router view

In my latest project, I have used a combination of Node.js, AngularJS, and HTML. The main HTML file is named "main.html". <html> <head> <script src="angularJs.js"></script> <script src="ui-router.js">< ...

javascriptangularjsnode.js

How can jQuery Validate show validation messages specific to each field?

I need to validate numerous mandatory fields and display alert messages in a specific format: "Please fill in" followed by the field label. Currently, I am manually implementing this validation method as shown below: $("#myform").validate({ rules: { ...

javascriptjqueryjquery-validate

Trigger animation once you've scrolled past a designated point in the document

I created a count-up counter animation using JavaScript, but the issue is that the counter starts animating as soon as I refresh the page regardless of where I am on the page or if the counter is even visible. I would like the counter to only start workin ...

javascripthtml

A guide on adding an onClick listener to a span element dynamically and then saving it to MongoDB

I have been attempting to add an onClick event within a span tag as shown below, with the goal of storing it in MongoDb. However, my event does not seem to be saving and is automatically removed. When I retrieve data from the database, it is not present. H ...

javascriptreactjs

Issue with Bootstrap hover and toggle collapse menu functionality in a Ruby on Rails application

I am currently following this tutorial and have reached this particular part. However, I'm facing an issue where the mobile hamburger menu doesn't display the menu when clicked on mobile devices. Additionally, the hover effect is not working for ...

htmlcssruby-on-railsbootstrap-4

tracking scroll position within div on main page

I have a div tag enclosed within a content tag due to the implementation of a masterpage containing the forms and body tags. <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server"> <div id="xxx" style="overflow:s ...

c#javascriptasp.netgridviewhtml