`Pure CSS Parallax Effect Enhanced by JS/jQuery Scrolling`

I have successfully created a CSS Parallax effect, but I am facing some challenges with the scrollTop property while using overflow: hidden on the html element.

The CSS requires overflow: hidden to be applied either on the html tag or any relevant container, and overflow-x: hidden; overflow-y: auto on the body tag or any relevant container.

Whenever overflow is applied, whether on html and body tags or elsewhere, scrollTop does not function as intended.

I have managed to detect scrolling on the body to trigger an alert or add a class dynamically, but my goal is to remove the added class when the user scrolls back up to the top of the page.

Below is my current code. It only adds the relevant class on scroll:

HTML

<header>
</header>
<div class="parallax">
  <div class="background"></div>
  <div class="sheet-1">
    <h1 class="page-header">My Parallax</h1>
  </div>
  <div class="sheet-2"></div>
</div>

SASS

\:root
  font-size: 10px

*, *::before, *::after
  box-sizing: border-box
  margin: 0
  padding: 0
  text-decoration: none

html
  overflow-y: auto

body
  height: 100vh
  overflow-y: auto
  overflow-x: hidden
  -webkit-overflow-scrolling: touch
  perspective: 0.1rem

<!-- The rest of the SASS code remains unchanged -->

<p>JS</p>

<pre><code>$("body").on("scroll",function(){
     $('header').addClass('black');
});

You can check out the project on Codepen here.

javascriptjquerycss

Answer №1

This issue was successfully resolved by monitoring the scroll event within the container.

I apologize in advance for the lack of organization and structure in the classes. I was quickly going through some old code.

HTML Code

<header class="header">
  <div class="wrapper">
    <div class="backdrop" id="backdrop"></div>
    <div class="logo" id="pos"></div>
    <nav class="navi">
      <ul>
        <li><a href="#secondSection">One</a></li>
        <li><a href="=#">Two</a></li>
        <li><a href="=#">Three</a></li>
      </ul>
    </nav>
  </div>
</header>
<div class="prlx" id="prlx">
  <div class="prlx-g">
    <div class="prlx-layer prlx-bg"></div>
    <div class="prlx-layer prlx-fg sheet">
      <h1 class="page-header">My Parallax</h1>
    </div>
  </div>
  <div class="cover sheet" id="secondSection"></div>
</div>

CSS Styles

:root {
  font-size: 10px;
}

/* CSS styles continue... */
.header {
  height: 5rem;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

/* More CSS styles... */

.cover {
  background: url("https://cdn.stocksnap.io/img-thumbs/960w/P3IB71W6GW.jpg") no-repeat center center;
  background-size: cover;
  color: white;
  position: relative;
  z-index: 1;
}

Javascript Snippet

// JavaScript logic

var prlx = document.getElementById("prlx");

prlx.onscroll = function prlxAnimation() {
 var prlx = document.getElementById("prlx");
 var scrollPos = prlx.scrollTop;
 var header = document.getElementById("backdrop");
 // document.getElementById ("pos").innerHTML = y + "px"

 if(scrollPos > 10){
        header.classList.add("black");
    }
    else {
        header.classList.remove("black");
    }

}

You can still view and interact with the same code on Codepen here.

Answer №2

$(window).scroll(function(){
    var scroll= $(window).scrollTop();


<script src="https://code.jquery.com/jquery-3.3.1.min.js"/>
  
  
$(window).scroll(function(){
var scroll= $(window).scrollTop();
$(".background").css("background-position","center "+(scroll*0.2)+"px");
});
:root {
  font-size: 10px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: sans-serif;
}

.header {
  height: 5rem;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  padding: 0 1rem;
  position: relative;
  z-index: 5;
}
.wrapper .backdrop {
  height: 100%;
  width: 100%;
  background: black;
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.wrapper .backdrop.black {
  opacity: 1;
}
.wrapper .logo {
  height: 70%;
  width: 150px;
  background: white;
  color: black;
  font-size: 2rem;
}
.wrapper .navi ul {
  display: flex;
  list-style: none;
}
.wrapper .navi ul li {
  font-size: 1.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15rem;
  margin-left: 20px;
}
.wrapper .navi ul li a {
  color: white;
}

.prlx {
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-perspective: 0.1rem;
          perspective: 0.1rem;
}

.prlx-g {
  height: 100vh;
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.prlx-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.prlx-bg {
  height: 100vh;
  width: 100%;
  background: url("https://cdn.stocksnap.io/img-thumbs/960w/LWRWOL8KSV.jpg");
  background-size: cover;
  -webkit-transform: translateZ(-0.1rem) scale(2);
          transform: translateZ(-0.1rem) scale(2);
}

.prlx-fg {
  -webkit-transform: translateZ(-0.05rem) scale(1.5);
          transform: translateZ(-0.05rem) scale(1.5);
}

.sheet {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.page-header {
  color: white;
  font-size: 4rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.15rem;
  margin: 0 auto;
}

.cover {
  background: url("https://cdn.stocksnap.io/img-thumbs/960w/P3IB71W6GW.jpg") no-repeat center center;
  background-size: cover;
  color: white;
  position: relative;
  z-index: 1;
}
<header class="header">
  <div class="wrapper">
    <div class="backdrop" id="backdrop"></div>
    <div class="logo" id="pos"></div>
    <nav class="navi">
      <ul>
        <li><a href="#secondSection">One</a></li>
        <li><a href="=#">Two</a></li>
        <li><a href="=#">Three</a></li>
      </ul>
    </nav>
  </div>
</header>
<div class="prlx" id="prlx">
  <div class="prlx-g">
    <div class="prlx-layer prlx-bg"></div>
    <div class="prlx-layer prlx-fg sheet">
      <h1 class="page-header">My Parallax</h1>
    </div>
  </div>
  <div class="cover sheet" id="secondSection"></div>
</div>

let's hope this code operates as intended

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

Angular Bootstrap Modal provides a sleek overlay for user input forms

Trying to access an angular form within scope for validation purposes. Initial Scenario Consider the following HTML: <body ng-controller='MyAwesomeController'> <form name="fooForm"> <textarea ng-model="reason" required= ...

javascriptangularjsmodal-dialogangular-ui-bootstrap

Enter the spotlight with all the information you need about AngularJS

Can someone please help me figure out how to display the post->id with a fade in effect? I've tried searching for a solution but haven't had any luck. Your assistance would be greatly appreciated!!! *I apologize in advance if my language is n ...

javascripthtmlangularjsfadeinfadeout

Can the fluctuations in resolution of webRTC streaming video be detected?

We are currently working on a project involving WebRTC and have specific requirements that involve detecting when the resolution of the streaming video (remote stream) changes in WebRTC. Is there a way for us to achieve this? Any tips or guidance would be ...

javascriptnode.jswebrtc

Troubleshoot: Unable to Change CSS on Click Using Javascript/jQuery

Having trouble creating three different buttons that toggle between various images using the CSS display property? Check out my code on https://jsfiddle.net/agt559e8/. function USradarChange1() { //document.getElementById("usradar1").src="weather/curr ...

javascriptjqueryhtmlcss

Utilizing Ajax with the navigation of back and forward buttons

As I embark on the journey of developing a new application, I am determined to embrace a full ajax style approach :) My weapon of choice for ajax requests is Jquery. The main JS file will receive variables from the link that was clicked and based on those ...

phpjavascriptjqueryajax

Exploring the capabilities of jasmine-node

Let's set up a test scenario: An authenticated user wants to update the description of a 'module' attribute. The 'module' data is not stored in a database but rather defined in a required file. Below is the test code that needs f ...

javascriptexpressjasminejasmine-node

Discover the unique value in Angular if it is not present in the list

I have a question about handling values in a list and displaying the "create value" component to the user when needed. How can I efficiently compare search input values with those in the list and determine if a match exists? If no match is found, the "cr ...

javascripthtmlcssangulartypescript

Requesting data from server using Ajax with multiple JSON responses

I'm facing a situation where my Ajax script calls a PHP file to make a query to MySQL and then formats the response in JSON. The challenge is that I need to retrieve data from different tables based on the id sent with the Ajax call. Some tables retur ...

phpjquerymysqlajaxjson

AngularJS - automatically submitting the initial item

Is there a simple way to automatically select the first item in my ng-repeat when the list is loaded for the user? Currently, I am using ng-click, but I am unsure of how to automatically trigger a click on the first item. Here is my ng-repeat: <div n ...

javascriptangularjsangularjs-ng-repeat

Arrange an array of objects to a specific sequence

I am currently working with an array of objects that contain a property named 'CODE'. [ { ID: 168, NAME: "First name", CODE: "AD" }, { ID: 167, NAME: "Second name", CODE: "CC" }, { ID: 169, NAME: "Third name", ...

javascriptangularjsunderscore.js

Guide to resolving the custom date range problem in daterangepicker

if($selected_date_interval == 'Yesterday'){ $_SESSION['start_date_by_interval'] = "moment().subtract(1, 'days')"; $_SESSION['end_date_by_interval'] = "moment().subtract(1, 'days')"; } elseif ($selected_da ...

javascriptphpdaterangepicker

Having trouble accessing the downloaded file from S3 using Angular and NodeJS

Currently, I am facing an issue while attempting to download a jpg image from amazon S3 using the NodeJs SDK. Although I can successfully retrieve the file object on the backend, encountering difficulties arises when trying to create a blob object and down ...

javascriptangularjsnode.jsamazon-s3

Jquery Scroll to Top

I have successfully created a scroll to top and scroll to bottom feature using jquery. The scrolling is based on percentages, so if it scrolls from top to bottom at 50%, it will stop at 50%. Now, I am trying to figure out how to make the remaining 50% of t ...

javascriptjqueryhtmlcssscroll

The PHP application encountered an error when trying to use an object of the mysqli_result type as an array

In my section, I have a straightforward display of data sourced from the database. Upon clicking options like construction and selecting countries like Algeria, the displayed values are [251, 211,712]. Similarly, for selections like Power in Egypt, the ou ...

javascriptphpjquerymysqlajax

How to eliminate the header of the VuetifyJS v-tabs component?

Is there a way to use the functionality provided by the VuetifyJS v-tabs component without displaying the navigation header? If so, how can I achieve this? You can check out an example on CodePen <v-tabs v-model="active" color="cyan" dark slid ...

javascriptvue.jstabsvuetify.js

PHP: Utilizing $_SESSION variables for automatic form filling across various PHP pages

I've spent an hour searching for a solution to the problem below, but I haven't been able to find one that fits my specific issue. However, I have some ideas that I'll share after outlining the problem. Problem: In an html form within a ph ...

javascriptphpjqueryajaxsession

PHP throws an error when attempting to process an Ajax request due to an index

Currently, I am in the process of developing an autocomplete textbox with the help of AJAX and jQuery. Below is the code snippet for the client-side AJAX implementation. $(document).ready(function(){ $('#tagtext').autocomplete({ sou ...

phpjqueryajaxautocomplete

Why are @Inject and Injectable important in Angular's Dependency Injection system?

constructor(private smartphoneService: smartphoneService) { } Although I am able to execute the code above without encountering any errors, I find myself pondering on the necessity of using @Inject and Injectable on services, Pipes, and other components. ...

javascriptangulardependency-injection

Tips for utilizing a variable from a function in one file within a function in another file

Having trouble using the variable counter from one function in a different file? In the first function, I defined counter without using "var" thinking it would make it a global variable. But for some reason, it doesn't seem to work. Help needed! //fun ...

javascriptfunctionvariablesglobal-variablesglobal

How to open a file using JavaScript without relying on NodeJS

I am looking for a way to access all the mp3 files within a directory named music on my server. My goal is to create a list of these songs and allow users to play them without relying on a Node server. Instead, I want to achieve this using the JavaScript c ...

javascriptjqueryhtmlnode.js