Prevent the scroll line from moving any further when it is crossed by the block

I am facing an issue with my webpage design. I have 3 blocks, the second block contains a scrolling circle that moves along with the main scroll. However, when the main scroll crosses the second block, the circle behaves incorrectly and stops scrolling on the page.

Is there a way to modify the script so that when the main scroll crosses block2, the circle automatically sticks to the last case and stops scrolling altogether? And then resumes functioning when we scroll back up past block2.

The main problem arises when the scroll reaches the last case, as the circle does not move further. I need the scroll to smoothly reach the end of block2, and when the scroll halts, the circle should stick to the center of the nearest case.

In my current implementation, although the circle sticks to the correct position when the scroll stops, it does not scroll correctly to the end for me.

javascripthtmljquerycss

Answer №1

If I correctly grasp your issue, it seems that adding half the height of the last case to the maxTop calculation could solve it like this:

  let {
    height: lastCaseHeight
  } = cases[cases.length - 1].getBoundingClientRect();
  maxTop = maxTop + (lastCaseHeight / 2)

This adjustment ensures that the maximum top position for the circle will be at the middle of the last case. Please review the updated snippet below:

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

Struggling with Javascript Arrays - despite my efforts, I have yet to find the correct solutions

Just getting started with arrays and could use some assistance! const array =["ron","rexona","danzial","alexander"]; Q1 - Create a function that will return an array containing items from array with more than 4 characters. ['alaska','orl ...

javascriptarrayssorting

Tips for retrieving modified data from a smart table in Angular 4

Currently, I am working on an angular project where I am utilizing smart table. Here is a snippet of my .html file: <ng2-smart-table [settings]="settings" [source]="source" (editConfirm)="onSaveConfirm($event)" (deleteConfirm)="onDeleteConfirm($event ...

javascriptangulartypescriptng2-smart-table

Showing the contents within a for loop in HTML inline mode

I'm struggling to showcase the elements in thumbnail format side by side using Bootstrap, but every time I try to do so within a for loop, they end up getting displayed on separate lines. Here's my code: {% for book in all_books %} <div class ...

htmlcssdjangobootstrap-4

The Contact.php page has the ability to send emails, however, the content of the

I have recently added a contact form to my website using a template. Although I am able to send and receive email messages successfully, I am facing an issue where the actual message content entered by users is not being received in my Inbox. Here is a sc ...

javascriptphpjqueryemailcontact-form

Transferring a single dataset from a table to a pop-up modal using Angular

I am working on a table to display entries for a contest, extracted from a database using PHP and converted into a .json object for AngularJS and JavaScript. I want to add a modal feature so that when a "judge" clicks on an entry, they can view its details ...

javascriptangularjsui.bootstrap

Using PHP to access HTML content from a page that demands authentication

I need help developing a PHP script that can scrape data from an HTML page. Right now, it works perfectly with pages that don't require authentication. However, I'm struggling to figure out how to extract content from a page that requires users t ...

phphtml

Pass the extended object from the service to the controller within a promise using the .map function

section: I am currently working on extending a JSON object within a service and passing it to a controller. The JSON originally came to the service from another service that makes backend calls. The code is quite intricate, so I've added comments an ...

javascriptangularjsjsonpromise

Retrieve all Tableau workbooks stored on the server

I am currently working with Tableau Server and have multiple workbooks published on it. My goal is to create a dropdown list that displays all the workbook names along with their corresponding URLs. This way, when a user selects a value from the dropdown, ...

javascriptangulartableau-api

Minimize the use of globalized variables in your LESS CSS code

Is there a better way to avoid using globally diffused variables? I conducted a test with the following setup: _import.less @test: #FFF; _import2.less @test: #000; test.less @import (reference) "_import"; body { background: @test; } test2.less ...

cssless

Store the information retrieved from an Ajax call regarding an artist on the page, ensuring that it is only saved once for that

I have been working on a single-page application that utilizes the Spotify REST API and JQuery to enable users to search for an artist and display their information on the page. However, I want to ensure that the app saves details about each artist only ...

javascriptjqueryajaxapispotify

Tackling the challenge of merging PDF files and designing a Table of Contents feature reminiscent of Acrobat in Node.js and JavaScript

I am currently implementing the following code snippet: const pdfmerger = require('pdfmerger') var pdfStream = pdfmerger(array_of_pdf_paths) var writeStream = fs.createWriteStream(final_pdf_path) pdfStream.pipe(writeStream) pdfmerger(array_of_pd ...

javascriptnode.jspdfnpm

Design a personalized button with a hand-shaped image using CSS

I am aiming to design a unique custom button that resembles the shape of a hand featured in this image, with the intention of adding some functionality to it later. My attempts so far have involved using an SVG path created in GIMP within a button, but all ...

htmlcss

Will using lengthy CSS custom property names impact the performance of a website?

I've been contemplating experimenting with projects that aim to shorten CSS variables in order to decrease the size of my CSS file. How do long CSS custom property names impact page performance? Reduction in CSS file size (including compression) Imp ...

cssperformancecss-variables

Incorporate hyperlinks to the right side of the footer section

I want to expand the footer by adding 3 more links to the right side of the logo. These new links should float to the right and always be positioned about 100px from the right edge of the web browser. Check out my JSFiddle for reference: In my attempt at ...

htmlcssfooter

Exploring the functionalities of Ajax and HTML5 history states in relation to back button behavior

There have been numerous inquiries regarding the functionality of pushState in HTML5, but I'm encountering two specific issues for which I haven't found any solutions. My popstate handler is defined as follows: $(window).bind('popstate&apos ...

javascriptajaxhtmlbrowser-historypushstate

Unusual transparency effect in flip panel with varying CSS transition speed during hover?

I need help with flipping over div elements on hover. I have a few questions: How can I adjust the flip speed for when the user is no longer hovering? I was able to change the flip speed to 0.5s duration on hover, but how do I control the off-hover spe ...

htmlcssanimationflip

Having trouble getting the jQuery AJAX post syntax to work properly

I am trying to send a post json value to another page using AJAX. However, when I include the "json" parameter in my POST request, the JavaScript code stops working. If I remove the "json" parameter, it works fine. I am still learning jQuery so any help ...

javascriptjqueryajaxjson

Modify CSS using JavaScript at a specific screen size

Currently, I am in the process of designing a responsive navigation system which involves implementing a button that dynamically changes the styling of the div #navigation using Javascript. The aim is to toggle between display: none; and display: block; ba ...

javascriptcsshiddenresponsivedisplay

React: Row with dynamic content not loading properly

I'm having trouble getting a response when I click to execute the addRow() function. Can anyone spot what might be wrong with my code? ... constructor(props) { super(props) this.state = { rowCount: 1 } } addRow = () => this.s ...

javascriptreactjsecmascript-6functional-programming

What is the reason for the immediate application of the set function in a useState hook within asynchronous functions?

While working with multiple set functions of a useState hook, I noticed different behaviors when calling them in sync and async functions. function Test() { console.log('app rendering starts.'); const [a, setA] = useState(1); const [b ...

javascriptreactjsreact-hooks