Achieve this effect by making sure that when a user scrolls on their browser, 50% of the content is entered into view and the remaining 50%

Is there a way to achieve this effect? Specifically, when the user scrolls in the browser, 50% of the content is displayed at the top and the other 50% is shown at the bottom.

Answer №1

How can you make an element scroll in the opposite direction of the rest of the content? This is what you're asking.

Here is a basic setup:

HTML:

<body>
  <div class="left-content">
    ...
  </div>
  <div class="right-content">
    ...
  </div>
</body>

CSS:

.left-content {
  width: 50%;
}

.right-content {
  position: fixed;
  right: 0px;
  width: 50%;
}

JS:

const rightContent = document.querySelector('.right-content');
document.addEventListener('scroll', handleScroll, { passive: true });

function handleScroll(event) {
  rightContent.style.bottom = (window.scrollY * -1) + 'px';
}

handleScroll()

View the demo here:
Demo 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

React Navigation Error: navigateTo must be used within a valid router configuration

When attempting to utilize useNavigation() from react-router-dom, I encounter the following error: Error: useNavigation must be used within a data router. See https://reactrouter.com/en/main/routers/picking-a-router. NavBar src/components/NavBar.js:6 3 ...

Chrome is having trouble setting the cookie with the Set-Cookie header

I am making an AJAX call to another service's API, expecting to receive a cookie that will be stored in my browser for future API calls. Unfortunately, even though the response headers contain a 'Set-Cookie' header, the cookie is not being s ...

Let's apply some CSS to the font style within the body

I've been incorporating a "footer.php" page into all other pages of my website. This footer showcases the site's name at the bottom of the screen and uses a custom font loaded with @font-face. Initially, I had something like this placed inside t ...

Touchscreen feature enables elements to be pushed away with the mouseover effect

I have been using this code to create an effect where an object jumps away when the mouse comes close: $("button").mouseover(function(){ $(this).css({ left:(Math.random()*80)+"%", top:(Math.random()*80)+"%", }); }); Is there a way ...

Change a TypeScript alias within the @types namespace

While using Typescript 3, I encountered a situation where I needed to modify a type alias from the @types/json-schema definition provided by DefinitelyTyped. The issue arose when I wanted to incorporate a custom schema type into my code. Since this custom ...

Transforming the button behavior with jQuery

I have encountered a situation where I am working with code in Twig. {% if followsId == null %} <div id="followUser" class="follow" data-userId="{{ profileUserData.id }}" data-currentUserId="{{ loggedUserData.id }}" data-action="follow"> ...

What is the best way to incorporate a Bootstrap spinner icon in the center of a webpage's background?

Every time my HTML page reloads, I want to display a background loader icon. Although I have tried using the Bootstrap spinner icon, I'm facing difficulties in positioning it at the center of the page. <html> <style> .overlay { back ...

Is there a way to use regex to selectively color JSON keys?

My goal in JavaScript is to extract all of the JSON keys using regular expressions. I am assuming that the JSON data will be formatted with each key-value pair on a new line, like this: { "name": "Jane", "age": 30, } In simple terms, I am looking ...

Page rotates on hover effect with RotateY

How can I get an image to rotate on the Y axis when hovered over? My code works in -moz- but not in -webkit- or -o-. What am I missing? .spin-logo { height: 450px; margin: 0 auto; -moz-transition: transform 2000ms ease 0s; -o-animation: transfor ...

Getting a Node Express 404 error while attempting to display an image that was uploaded using multer

I am facing an issue with uploading images using multer. Previously, everything was working perfectly fine on localhost. The images were getting uploaded and I could view them using the provided URL link in the code. However, after uploading it to a server ...

Ways to retrieve text like innerText that functions across all web browsers

I need to retrieve the text from a Twitter Follow button, like on https://twitter.com/Google/followers Using document.getElementsByClassName("user-actions-follow-button js-follow-btn follow-button")[0].innerText correctly displays the text as: Follow ...

Error: The property 'price' is not defined and cannot be read

As I work on setting up my online store for teaching node.js, I encountered an issue when trying to delete a product from the products.json file. Surprisingly, once a product is removed, the corresponding entry in cart.json gets deleted as well. The error ...

Guide on excluding a specific element using an Xpath expression

I am seeking a solution to craft an XPath expression that can target all <p> elements except for p[6] and p[7]. Currently, I have formulated this expression: //div[@class="Job-Description app-responsive-jd"]/p[1], which is functioning corre ...

Navigating a plethora of unpredictable identifiers using AngularJS

My goal is to display content from a json file that varies in type and consists of pages divided into chapters. Users can navigate through the content using an aside menu or next and previous buttons. Currently, I am able to display the content by inserti ...

The issue of Angular UI Bootstrap buttons not updating persists even after the removal of an

My Radio-bottoms are powered by an Array for a Multi-Choice answer setup. <div ng-repeat="option in options"> <div> <button type="button" style="min-width: 100px" class="btn btn-default" ng-model="question.answer" btn-radio="' ...

Bug in scroll animation accumulation

Hey everyone, I've been exploring a plugin developed by Zach Dunn which can be found at https://github.com/buildinternet/totem. I'm encountering some issues with the animation when clicking on the next and previous links. I've attempted usin ...

In the event that the get request fails, go ahead and clear the

Currently facing an issue and seeking a solution: I have a game running that retrieves the state of the game periodically. However, if a user logs out, the game ends but continues to send put requests at the set interval. I am exploring options like setti ...

What methods can I use to automate the testing of a UI that relies on a lightbox feature?

As a tester utilizing crossbrowsertesting.com, I have come across a situation where developers integrated lightbox into a web app built on the Drupal platform. When users navigate to mysite.com/home and click on a div that triggers a lightbox effect, addit ...

Refreshable div element in a Code Igniter-powered web application

I am encountering difficulties with automatically refreshing my div using the CodeIgniter framework. My goal in the code snippet below is to have the particular div with id="lot_info" refresh every 1 second. The div is not refreshing, and an error message ...

The fadeIn callback doesn't seem to function properly when triggered within the success function of jquery.ajax

Using AJAX, I fetch some data and prepend it to the body. Once displayed, I need to execute some client-side operations on this new element, such as rendering Latex using codecogs' script. Below is a snippet of my code: $.ajax({ /* ... */ success: fu ...