Adjust the color as you scroll

It appears that the example provided changes the color from red to blue from the bottom, but I am looking for a solution that will change the color from top as I scroll. Can anyone help me achieve this effect using JavaScript? Here is another great reference example where scrolling changes a gray line into red.

<div id="scroll1"></div>
<div id="scroll2"></div>

CSS portion:

#scroll1 {
   background-color: red;
   width: 50px;
   height: 800px;
}
#scroll2 {
  background-color: blue;
  width: 50px;
  height: 800px;
}
javascriptcsshtml

Answer №1

#scroll1{
   background-color:purple;
   width: 50px;
   height:800px
}
#scroll2{
   background-color:orange;
   width: 50px;
   height:800px
}

By following the method demonstrated in this scenario, achieving the desired effect can be accomplished through CSS. Simply modify the color values as needed.

Answer №2

Are you envisioning a smooth transition where the colors gradually blend together when you mention scrolling? Or are you looking for an immediate and abrupt change?

Regardless of your preference, JavaScript will likely be needed since CSS has its limitations in creating complex user interfaces.

Answer №3

If you're looking to smoothly transition your color scheme, there's no need for multiple divs.

Just create a single div with a gradient color as the background-color.

The gradient goes from red to blue, so as you scroll, there's no need to adjust your CSS/JavaScript because the gradient will naturally change.

Take a look at my demo on JSFiddle.

Answer №4

Take a look at this! I believe this is the solution you're looking for.

HTML Code

<html>
<head></head>
<body>
   <div id="contents"> </div>
<div id="container"></div>
</body>
</html>

Style Sheet

#container{
    width:5px;
    height:400px;
    background-color: red;
    Position:absolute;
    border:1px #000 solid;
}
#contents{
    width:5px;
    height:400px;
    position:fixed;
    background-color: white;
     border:1px #000 solid;
}

JQuery Script

$(document).ready(function(){
    $("body").height(1000);
    $(window).scroll(function() {
      var newSize = $("#contents").height() * (1 - $(window).scrollTop() /  ($(document).height() - $(window).height()));
      $("#container").animate({height:newSize+"px"},500);
    });
});

You can view the demo by clicking on this link.

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

Utilizing Moment.js: Transforming 12-hour format to a Date object

Is there a way to convert a 12-hour string into a 24-hour Date object? day.from = day.from || moment("6:00", ["h:mm"]).format("HH:mm"); Unfortunately, I am encountering the following error: angular.js:11706 Error: [ngModel:datefmt] Expected `6:00` to be ...

javascriptangularjsmomentjsangular-moment

modify the final attribute's value

Hello I've been using skrollr js to create a parallax website. However, the issue arises when determining the section height, as it depends on the content within. My goal is to locate the last attribute and adjust the number value based on the section ...

javascriptjqueryhtmlcss

The functionality of the UI Bootstrap custom directive controller does not seem to be recognized

I am trying to implement UI Bootstrap Collapse within my custom directive called <collapse> Unfortunately, I am encountering the following error: Error: [ng:areq] Argument 'CollapseDemoCtrl' is not a function, got undefined You can view m ...

javascriptangularjsangular-ui-bootstrap

Issue Alert: Inconsistencies with Google Scripts spreadsheets

Objective I have been working on a script that will make consecutive calls to an API (with a JSON response) and input the data into a Spreadsheet. Issue: When I debug the script, everything runs smoothly without any major problems. However, when I try r ...

javascriptjsongoogle-apps-script

During the Internet Explorer browser, the command will run two times

<div style="width:expression(alert('1'));"></div> When this code is executed in IE7, it will trigger the alert function twice. Why does this happen? ...

javascriptcssinternet-explorer

Differences between <br> and <BR> when using str_replace in PHP

I'm attempting to perform a str_replace on a text block like the one below, stored in the variable $who: Acme Corporation <BR><br>Accounting Dept <BR><br>123 Sesame St. <BR><br>New York, NY 10021 <BR><br&g ...

phphtmltagsstr-replacemailto

Issue with AngularJS script halting when reaching factory function that returns a promise

I have been working on a beginner project that is essentially a simple task manager (similar to those todo list projects). I created a user login page for this project and here is how it functions. There are two functions, siteLogin() for logging in, and ...

javascriptangularjsangular-promise

The default export of Nuxt, referred to as 'mod', could not be located

Using Nuxt with Typescript, I have created a custom component as shown below: <template> <div class="field"> <label class="label" v-if="typeof label !== 'undefined'">{{ label }}</label> <div class=" ...

javascriptvue.jsnuxt.js

jsonwebtoken does not fetch a token

I've been working on a user registration system using nodejs and sequelize. So far, I've successfully implemented the login and register functionalities. However, I am encountering an issue with getting the token after a successful login. Despit ...

javascriptjsonnode.jsexpressjson-web-token

React is having trouble loading the page and is displaying the message "Please enable JavaScript to use this application."

Following a tutorial at https://learn.microsoft.com/en-us/learn/modules/build-web-api-minimal-spa/5-exercise-create-api Everything was going smoothly until I reached this step: Add the following proxy entry to package.json: "proxy": "http:/ ...

javascriptreactjs

Unable to assign value to a public variable in Angular

I am facing an issue where I am trying to retrieve a value from the localStorage and assign it to a variable. However, when I try to use that variable in functions, it is coming up as undefined. code export class DashboardService { public token: any; ...

javascriptangularionic-framework

What steps can be taken to address the issue of "Failed to compile"?

import React, { useEffect } from 'react' import { Row, Col, List } from 'antd' import Axios from 'axios' import { useState } from 'react' import SideVideo from './Sections/SideVideo' import Subscribe from & ...

javascriptreactjs

Is there a way to easily access the automated departure range feature of a date

I apologize if my question seems too simple, but I am having trouble understanding JavaScript. My issue pertains to a range datepicker where I want the departure picker to automatically open when the arrival is selected. Here's the JavaScript code I h ...

javascriptjquerydatepicker

Prevent the influence of other page styles on a div element

My question involves a browser extension that inserts a div element (along with others) into the page. Is there a method to prevent the page's styles from impacting the appearance of the elements I've added? One option I've thought about is ...

css

What is the process for incorporating an npm package into an HTML document?

Here is the code from my HTML file: <!DOCTYPE html> <head> ... </head> <body> ... <script src="script.js"></script> </body> This is what I have in my JavaScript file named script.js: import * as File ...

javascripthtmlnode.jsnpmfrontend

Ensuring that an md-radio-group is a required field in Angular Material

Currently, I am working on a project using Angular Material where I need to enforce a required radio group. This means that the user must select a radio button before being able to submit the form. The form should be considered invalid if no radio button i ...

javascriptangularjsangular-material

Hide custom video controls from view

For a while, I was able to hide the controls on my page using position:absolute; and bottom:-36px, which made them pop up when hovering over the player. Recently, however, I noticed that I can now scroll down to see them. How can I maintain the slide-up ef ...

htmlcss

Place elements at the bottom of a webpage on any browser or device with just a single page

I am in the process of creating a website that features a top menu and a background image with text on the home page, covering the full screen. However, I also need to include 3 blocks at the bottom of the screen that should display consistently across all ...

htmlcss

Tips for changing the content of a td element to an input field and removing the displayed value

I am facing an issue with a dynamic table that displays names and input fields. When a name is displayed in a table row, the user has the option to delete that name. I am able to remove the value from a specific table row, but I am struggling to replace th ...

javascriptjqueryhtml

Which option offers better performance in Three.js: utilizing a sprite or a BufferedGeometry?

I am currently in the process of revamping an outdated visualization created a few years back using an earlier version of Three.js. The visualization consists of approximately 20,000 2D circles (nodes from a graph) displayed on a screen with predetermined ...

javascript3dthree.js