Achieve a scrolling DIV that moves with the page's content without relying on the pos

I'm facing an issue where I have a div on the left-hand side of my page that needs to scroll along with the page. Using position:fixed works, but when I resize the browser window, the div ends up overlapping other elements on the page. This is clearly because of the fixed positioning.

Is there a way to make the div scroll with the page without using position:fixed? Maybe through JavaScript? Any tips or suggestions would be greatly appreciated.

    #scrollerDiv{
        position: fixed;
        right:100px;
        top:238px;
        padding: 10px;
        width:48px;
        height:48px;
    }
javascriptjqueryhtmlcss

Answer №1

Here is a suggestion to try:

 $(function(){ //<-----------------------document ready
    $(window).on('scroll', function () {
      var scrollPosition = $(document).scrollTop();
      $('.scroll').css({
         top: scrollPosition
      });
   }).scroll();
});

I have created a live demo on JSFiddle for you to see.

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

Adjusting the projection matrix parameters in Three.JS

My goal for this project is to manually adjust the parameters of the projection matrix. For instance, I would like to have the ability to do something similar to the following: camera.projectionMatrix[15] = 1; Is there a way to achieve this in Three.JS? ...

javascriptwebglthree.js

Sending string variable from Perl CGI script to HTML frontend

Having just begun experimenting with AJAX, I'm encountering difficulties in passing variables back to my HTML script. In this setup, I'm using a combination of a XAMPP webserver, JavaScript, and jQuery for the HTML script, along with a Perl cgi ...

javascriptjqueryajaxcgi

The search bar on the screen does not span the entire width as expected using Bootstrap CSS styling

I have a search form with an input field and a button. When I place the form in a standalone HTML file, the input and button span across the width of the div. However, when I embed it into the specific div I am working on, it shrinks to the left. Here is t ...

htmlcsstwitter-bootstrap

Utilize multiple buttons to toggle with v-if condition

Here's the code snippet I'm working with: <div class="flex justify-between flex-wrap"> <div v-for="kink in kinks.data" :key="kink.id"> <button type="button" :class="enabl ...

javascriptvue.js

Looking to update a form when clicking on the change button?

Two JSON files, "a.json" and "b.json", are in question. A different form needs to be displayed when the user clicks on each respective button. The issue arises when clicking on the second button does not show the second form as intended. The goal is to onl ...

javascriptjqueryangularjsangularjs-directive

When Safari injects elements that were previously hidden with display:none, they remain visible

Using the JS library MagnificPopup, I implement popups on my website triggered by a "read more" button. This library moves the html to display it in a different location and then injects it back when the popup is closed. While this functionality works seam ...

javascriptcsssafarimagnific-popup

Implementing custom validation in React to dynamically enable/disable buttons

I am working on a basic form that includes 3 input fields and one submit button. The submit button is initially disabled, and each input field has its own custom validation logic using regex. I am looking for a way to enable the button only when all the ...

javascriptreactjsantd

Using HTML: The trick to obtaining selection offsets in relation to HTML tags

Let's say I have HTML code like this: <div> <p> start<span>span</span>end </p> </div> I am looking for a way to retrieve the offsets when text is selected, while still taking into account the presence of span ...

javascriptjqueryhtml

What is the best way to manage the maximum number of concurrent AJAX requests?

I am currently working on an autocomplete search bar feature. <input type="text" class="form-control" id="text" > <script> $("input").keyup(function(){ let key = $("input").val(); ...

javascriptajaxexpress

Tips on connecting the endpoints of two parallel quadratic Bezier curves that both begin with a MoveTo command

I am currently working on creating a Sankey Diagram from scratch using VueJS and SVG. I have encountered challenges in closing the paths of two parallel quadratic Bezier curve paths from nodes to nodes. For instance, after some additional calculations, I ...

javascriptvue.jssvg

Activate an action by maintaining contact with a div or button

Picture a div that looks like this: <div class="list"> <ul> <li class="user">Nickname 1</li> <li class="user">Nickname 2</li> </ul> </div> I have a concept in mind where, similar to ...

androidjqueryiossmartphone

Verify the presence of the item within the array that is nested

I have the following JSON data const data = { rooms: [ { roomId: 1, schedules: [ { home1: "06:00", dayOfWeek: 1, away: "21:30" }, { home1: "06:05", dayOfWeek: 2, away: "22:30" } ...

javascriptarraysloopslodash

Are undefined variables in jquery safe to use for ensuring compatibility across different platforms and for potential future applications?

Question Example: In the first lengthy if statement, if the first two conditions are met, there could be various scenarios where $(this).val().split("@")[1].split(".")[1] may be undefined. Is it considered safe to utilize this approach with javascript/jqu ...

javascriptjquery

The show.bs.modal event has been triggered when the .show() method is used on elements within the

Recently, I discovered that the event show.bs.modal is triggered not only when the modal itself is shown, but also every time you call the .show() method for an element within the modal. To attach the event handler, you would typically use the following c ...

javascriptevent-handlingbootstrap-4bootstrap-modalformvalidation.io

How can you center a webpage and make it occupy 60% of the screen?

I was attempting to design a website where the main content takes up 60% of the body. This is what I tried initially: body { align-items: center; text-align: left; justify-content: center; width: 60%; } Unfortunately, this approach did not work ...

htmlcssalignmentfrontend

The image is not correctly aligned in the center within the anchor element

In the process of working on my Angular project, I have encountered an issue with displaying components as items. Here is a snippet of the component code: <a href="" class="list-group-item clearfix" > <div class="container-fluid"> <div class ...

htmlcssbootstrap-4angular9

Ways to ensure that when changes occur in one component, another component is also updated

How can I update the cart badge value in the navbar component every time a user clicks the "Add to Cart" button in the product-list component? The navbar component contains a cart button with a badge displaying the number of products added to the cart. n ...

htmlangulartypescript

If the condition evaluates to true, then all other conditions will be skipped

xyz.html <p id = x ngClick = close($event)></p> <p id = y ngClick = close($event)></p> <p id = z ngClick = close($event)></p> <h1 id = a ngClick = close()></h1> xyz.js function close(event) if (event.targe ...

javascriptjqueryhtmlangularjs

"Information in the table derived from the contents of the provided URL

I have created a JavaScript function that displays a table when a user hovers over specific text on a website. Currently, the table's content is hardcoded with a few words for debugging purposes and it appears as expected. The HTML code for the cont ...

javascripthtmlurl

What is the Javascript alternative to this jQuery code?

Currently, I am working on a project where the use of jQuery is prohibited. Therefore, I am in search of plain Javascript code that serves as an equivalent to the following jQuery script: $('img[alt="Apple Store Logo"]').parent().removeAttr("tar ...

javascriptjquery