Struggling with incorporating a scroll loop effect and rotating div using the offsetTop property

Currently, I am working on a website that features a scroll loop effect, where reaching the bottom of the page seamlessly jumps back to the top, creating an infinite loop. My challenge lies in implementing an effect to rotate individual divs based on their offsetTop.

You can view the rotation effect without the scroll loop here: https://jsfiddle.net/jacob_truax/bgrkewny/3/

If you want to see both effects together, check out this link: https://jsfiddle.net/jacob_truax/b1x4dow7/18/

The code breaks when combining the scroll loop effect with the rotation effect. Can anyone assist me in resolving this issue?

Below is the JavaScript code for the faulty fiddle:

...

And here is the CSS code used:

...
javascripthtmlcssoffset

Answer №1

The offsetTop attribute provides the top position (in pixels) with respect to the top of the offsetParent element.

By replacing line #14 with scrollTop, the code functions correctly:

  const topViewport = divTag.scrollTop;

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

The appearance of the Angular material component is altered once integrated into a new Angular application compared to its presentation in the provided example

After adding the Angular Material component "Toolbar" to my project, I noticed that it does not appear the same as it does in the example provided. Despite using the same styles, the outcome is different. Here is what the example looks like on the project ...

cssangularsassangular-material

Is it possible to refresh a div on one .aspx page using content from another .aspx page?

Just beginning my journey with asp.net and currently tackling a project that involves two .aspx pages. Events.aspx: This page is where the site admin can update upcoming events and webinars using an available panel to input event title, date, information ...

c#javascriptjqueryasp.nethtml

What is the best way to access a particular property of an object?

Currently, I am successfully sending data to Mongo and storing user input information in the backend. In the console, an interceptor message confirms that the data is received from MongoDB. However, I am struggling to extract specific properties such as th ...

javascriptmongodbvue.jsbackend

Aligning multiple items to the right using Flexbox

While it's common knowledge how to align one item to the right in flexbox, what about aligning multiple items, like the last two elements, to the right and the rest to the left? Take a look at this example where I want elements with the class .r to be ...

htmlcssflexbox

utilizing symbols from a vector graphic icon库

There are countless icon images to be found on the internet. Recently, I came across this particular set and now I'm stumped on how to actually utilize them. Despite my efforts to find tutorials online, I have come up short in finding any helpful reso ...

htmlcssvectoricons

I'm curious if there is a method to incorporate an array within a where: $or statement using sequelize?

I have an array of team IDs called teamsIdsSelected = ['1', '5', .., 'X'] In order to retrieve all the challenges associated with each team ID from the 'Challenge' table, I attempted the following: Utilizing this f ...

javascriptmysqlnode.jsexpresssequelize.js

Implementing jQuery/JavaScript to efficiently iterate through JSON data

I have implemented a form that allows users to select an item from a multi-select dropdown (A). If the desired item is not listed, users can manually add it using another text input box (B). Once added, an AJAX call saves the item to the database. After su ...

javascriptjqueryjson

Steps to confirm if a route has been passed a prop

Within the GridRow.vue file, I have a function that redirects to a specific route while passing along parameters: redirectWithData () { this.$router.push({ name: 'payment.request', params: { per ...

javascriptvue.jsvue-router

Guide to emphasizing a specific term within a string by utilizing coordinates in javascript

I am facing a challenge when trying to highlight multiple words within a sentence. Specifically, I have text data that looks like this: "The furnishing of Ci Suo 's home astonished the visitors: a home of 5 earthen and wooden structures, it has a sit ...

javascripthtmlcssvue.js

Using hooks to call a function in a different function is not allowed

The log out feature allows a user to sign out by initiating an API request and removing the user's data from LocalStorage and the Redux store. To achieve this, the function utilizes two hooks: useDispatch and useFetch (a custom hook). import {useDispa ...

javascriptreactjsreact-hooks

Minimize the gap between legend text and icon in Highchart

Is there a way to decrease the space between the number and icon? I am currently working with Angular 8 and Highchart. Below is the configuration of the chart legend. https://i.stack.imgur.com/0dL7y.jpg this.legend = { align: 'center', verti ...

javascriptangularhighcharts

Ways to extract the value of radio buttons for easy manipulation purposes

Update: Success! I finally got it to work. Here is my example code. Hopefully, this can assist others with similar needs. I am in need of a shipping radio button for regular and express shipping options. With some guidance from online research and cale_b ...

phpjqueryhtmlajax

Using HTML and JavaScript to add variables into the URL within the window.location

I have been struggling to incorporate longitude and latitude into the URL. Despite researching various topics online, I have not found a solution that works for me. Below is the HTML code that showcases the issue. When you click the "Show Position" button ...

javascripthtml

Having difficulty retrieving the value from an input field, despite trying both text() and val() methods

I'm struggling to retrieve the value of an input field that a user enters and then use it in my code. I have attempted using both text() and val() to get the value from the input fields, but neither method seems to be working for me. If you have any ...

javascriptjqueryinput

"Modifying the form-control-lg class in Bootstrap and AngularJS affects input size exclusively, leaving the label unaffected

Currently, I am focusing on enhancing an AngularJS custom text input component: <div class="form-group has-feedback" ng-class="[$ctrl.sizeClass, {'has-error': $ctrl.isNotValid(), 'has-success': $ctrl.isValid()}]" > ...

javascriptcssangularjstwitter-bootstraptwitter-bootstrap-3

End the div element upon completion of the Vimeo video

I am in need of a website that includes an intro video displayed as a full-width div over the background content. To achieve this, I created a Div containing an iframe video from Vimeo along with a button to skip the intro (which closes the div upon clicki ...

javascriptjquerycssvimeovimeo-api

Executing a C# method from within a .js file using a Javascript function in a .cs file

I've made some updates based on the responses provided. My main area of confusion lies in the 'data' parameter and how to handle it in the JavaScript call. C# method [HttpPost] public string GetPreviewURL(string activityID) ...

javascriptc#ajax

Utilizing a variety of shaders on different mesh objects

I am working on applying different shaders to meshes with video textures. Currently, I can only see one shader at a time, but I would like to be able to see both (for example, monochrome and sepia). How can I achieve this? When I comment out one shader, I ...

javascriptthree.jspost-processing

Retrieve a text and save it into a variable

Is there a way to extract a specific string and save it as a variable? For example, if I have the following URL: http://sub.site.com/WordsHere-t.jpg I am looking to extract just WordsHere. The length of this string can vary and will not always be 9 chara ...

javascriptjqueryregex

The expected result is not obtained when making an Ajax request to a PHP variable

I recently encountered an issue with my AJAX GET request. The response I received was unexpected as the PHP variable appeared to be empty. Here is the snippet of jQuery code that I used: jQuery(document).ready(function($) { $.ajax({ url: '/wp ...

javascriptphpjqueryajaxwordpress