Adjusting the transparency of a Div element as you scroll

Before you get mad, let me clarify that I have combed through countless resources and forums, but I still can't seem to crack this code. I whipped up a basic website to grasp the concept before applying it to a more intricate project. I've experimented with various scripts, but none seem to do the trick.

Let's take a look at the HTML File:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html>

<head>
    <title> </title>
    <meta charset="utf-8">
    <link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:300,400' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="scripts/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="http://www.queness.com/js/bsa.js"></script>
    <link rel="stylesheet" href="styles.css">



 <script type="text/javascript">

 $(document).ready(function() {

  var colordivs = $('#fade div');

  $(document).scroll(function(e) {
      var scrollPercent = ($(window).scrollTop() / $('#fade').outerHeight()) * 100;

      if (scrollPercent > 0) {
          if (scrollPercent < 33) {
              var opacity = 1 - (scrollPercent / 33);
              $(colordivs[0]).css('opacity', opacity);
          }
          else if (scrollPercent > 66) {
              var opacity = 1 - (scrollPercent / 100);
              $(colordivs[0]).css('opacity', 0);
              $(colordivs[1]).css('opacity', 0);
              $(colordivs[2]).css('opacity', opacity);
          }
          else if (scrollPercent > 33) {
              var opacity = 1 - (scrollPercent / 66);
              $(colordivs[0]).css('opacity', 0);
              $(colordivs[1]).css('opacity', opacity);
          }
      }
  });

  });



</script>       
 </head>

 <body>
<div class="container">
    <div id="fade">
    </div>  
</div>
 </body>
</html>

Now, let's delve into the CSS file:

body {
    background-color: #ffcc00;
}

.container {
height: 6000px;
width: 100%;
margin: 0 auto;

}
#fade {
background-image: url("skyline.png");
width: 100%;
height: 600px;
position: fixed;
overflow: hidden:
}

So, my initial question is whether I have all the necessary elements. Am I overlooking a jQuery script or something crucial? Also, does the position of the CSS file matter as long as it's accurately linked in the HTML document? I'm perplexed as to how the opacity is altered and if it correlates with the CSS file. I'm well-versed in HTML and CSS, and I grasp the script's logic, but I'm stumped as to why they're not cooperating.

Thanks in advance for any insight!

Answer №1

Modify

  let elementsToFade = $('#fade div');

and update it to

  let elementsToFade = $('#fade');

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

Find the location of the div element but ignore any divs with a certain class

<div class="center"> <div id="ContentTop" class="tt1">Top Content</div> <div id="abc" class="hide">exrt</div> <div id="bcd" class="hide">Content exta</div> <div id="MidContent" class="tcg">Mid ...

I am facing an issue where my Javascript hide and show function is not working properly when clicked. Despite not giving

I am currently working on a Javascript onClick function to toggle the visibility of content in a lengthy table. I initially set part of the table's class to display: "none" and added a button to show the hidden content when clicked. However, nothing i ...

The appearance of Bootstrap buttons is altered when they exceed the container width and a scrollbar appears

In my Bootstrap-designed page, I am utilizing a scrollbar to handle the overflow of elements. However, I've noticed that the rounded corners of my styled buttons disappear when the page overflows, resulting in plain rectangular buttons. Is this an inh ...

Issue with Bootstrap v3.3.7 panel not collapsing as expected following height adjustment

Utilizing bootstrap 3.3.7 panels, I encountered an issue when trying to slide up the panel using the icon. The panel would not hide properly once the panel height was set, resulting in only the panel content body sliding up. Here is an example: $(&apo ...

Is it feasible for a div to overflow beyond its container?

Currently, I am utilizing a responsive framework called skeleton, which has been very effective. However, I am encountering an issue with the header and footer sections. I would like the background to stretch the full width of the page, as this is a common ...

Issue arising from JQuery libraries when utilizing Webpack

Having an issue with my form renderer JS script. When making an AJAX request to retrieve it, it applies functions and properties to jQuery for rendering a form. However, due to the use of webpack with another framework, there are two jQuery contexts causin ...

In order to design a v-btn-toggle with vertically aligned buttons, rather than horizontally

I'm currently in the process of developing a quiz using VueJS and Vuetify. My challenge lies in organizing the answer options vertically for the user to select. I attempted to utilize the v-btn-toggle component, but encountered an issue where the butt ...

Aligning an Image Dynamically Inserted with JavaScript

I'm having trouble centering an image added via Javascript within a table using my embedded CSS. Can someone guide me on how to adjust the CSS to center the image in the table? I've tried setting the margin property to auto for the image, but it& ...

Twitter Bootstrap Dropdown PHP link fails to function

Recently, I designed a dropdown menu to be used on a PHP page. The main button, which contains the dropdown links, needs to still function as a link to another page. Despite following all the instructions provided on the Bootstrap website, the main button ...

Access and retrieve pkpass files from a server using React

I've exhausted all options but still can't get it to work. I'm attempting to create an Apple wallet pass using https://github.com/walletpass/pass-js. When I download the pass on the node server where I've implemented it, everything work ...

CSS smoothly scrolls upward within a set height restriction

Is there a way to use CSS to ensure that the scroll bar of a fixed-height message box is always at the bottom, displaying the latest entry? Currently, as more messages populate the chat box main section, everything inside remains static. The only way to v ...

Error: The JavaScript variable 'undefined' is being used as a function, which is incorrect. This error occurs when trying to execute the function `mockBackend

I am currently working on unit testing an AngularJS controller using Karma and Jasmine. Below is the test suite I have created: describe('Controllers', function(){ var $scope, ctrl; beforeEach(module('curriculumModule')); ...

There seems to be an issue with the visibility of the b-button within the b-table component in

I'm new to Vue Js and I'm having trouble with my b-button not displaying in my table. I can't figure out why. Below is my HTML code: <div id="listlocales"> <div class="overflow-auto"> ...

What's the most efficient way to iterate through this Array and display its contents in HTML?

I'm struggling to sort a simple array and I think the issue might be related to the time format. I'm not sure how to reference it or how I can properly sort the time in this array format for future sorting. //function defined to input values ...

Modify the class of an input while typing using Jquery

Recently, I created a form using Bootstrap 4. The validation process is done through a PHP file with an AJAX call and it's functioning correctly, except for one issue. I want the input class to switch from "invalid" to "valid" as soon as the user begi ...

confirm chosen option html php

Is there a way to validate the select tag so that an alert appears when the user tries to submit without selecting a session? Below is the HTML and PHP code I have been using, any help would be appreciated. <select name="ses"> <o ...

Is there a way to incorporate a CSS file into this without explicitly mentioning the color?

I have successfully implemented a PHP solution for changing themes with a cookie that remembers the selected theme color when the user leaves the site. However, I now need to switch this functionality to JavaScript while still utilizing the CSS file. How c ...

Selecting the next element in the DOM using Javascript

Here is the structure of my current setup: <div class="wrapper"> <div class="first"> <a class="button" href="">click</a> </div> <div class="second"> <div class="third"> S ...

HTML replacement on an element cannot be done more than once. Solving the issue with Rails and JQuery Ajax

I have created an application with 4 buttons, each representing a different directory. When a button is clicked, an Ajax call is made to generate a JStree element displaying the directory hierarchy. Everything works perfectly when I click on the first but ...

"Choosing a div element using nth-child() method: a step-by-step guide

An HTML structure was provided which includes a section with an id of "main-content" and a class of "photo-grid". Inside this section are multiple div elements with a class of "col-1-4", each containing a link, paragraph, and image. <section id="main-c ...