Tips for accelerating an HTML element to move into position

I am working on a website where I have an element that remains in the upper corner and follows the user as they scroll down. You can see an example of this behavior in this Fiddle. However, I want to enhance this effect by allowing the element to smoothly follow the user when scrolling and then speed up back to its fixed position. How can I achieve this?

#follow {
    position: fixed;
    right: 30px;
    top: 70px;
}

$(window).scroll(function(){

    // Add code for smooth following effect here
});
javascripthtmlcss

Answer №1

Have you considered trying a different approach, such as changing the CSS property to position: absolute and using .animate()? Remember to include .stop() on each scroll event to prevent delays if scrolled quickly in succession.

#follow {
    position: absolute;
    right: 30px;
    top: 70px;
}

$(window).scroll(function(){ 
    $("#follow").stop();
    var window_top = $(window).scrollTop();
    $("#follow").animate({"top":window_top+70}, 500);
});

Feel free to check out this fiddle to see if it meets your requirements: https://jsfiddle.net/f7gjvpof/3/

Answer №2

If you want to use the position property as fixed, a more intricate animation might be necessary to mimic movement (since no CSS attributes change when scrolling with fixed position).

However, utilizing position: absolute and setting the element's top to match 

window.pageYOffset</code, you can smoothly animate the element using <code>.animate
with easing effects to create a dynamic acceleration while scrolling.

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

Managing failure function in AJAX: A comprehensive guide

I've been trying to manage the failure function in AJAX to display specific messages to users. Despite attempting various solutions, I have struggled to control the failure function. Here is my code: <p id="Likes" class="alert-danger" style="displ ...

javascriptajaxasp.net-mvcasp.net-mvc-4asp.net-ajax

``I am experiencing issues with the Ajax Loader Gif not functioning properly in both IE

I am brand new to using ajax and attempting to display a loading gif while my page loads. Interestingly, it works perfectly in Firefox, but I cannot get it to show up in Chrome or IE. I have a feeling that I am missing something simple. The code I am using ...

javascriptjqueryhtmlcssajax

Discovering the dimensions of a video in Angular 2 using TypeScript

To determine whether the video is portrait or landscape, I am attempting to retrieve the height and width of the video using the following method: import { Component, OnInit, AfterViewInit } from '@angular/core'; @Component({ selector: ' ...

javascriptangulartypescriptvideo

Add formatting to specific list items within the Ui Fabric Nav element

https://i.sstatic.net/BcCbj.png Please take a look at the provided screenshot. In the list, some items are marked with an eye icon to indicate that they are hidden and not important for the user's immediate attention. However, this icon seems to have ...

cssreactjsoffice-ui-fabric

Discovering the position of points on a plane following a rotation within Aframe

Currently, I am utilizing Aframe to create a plane within a virtual scene. My goal is to determine the central points on all 4 sides of the plane based on its xyz rotation. Is there any specific equation or function within Threejs or Aframe that can assis ...

javascriptthree.jsaframe

Oops: Retrieving Information from Request Body in Serverless MongoDB Function

While working with a MongoDB serverless function, I faced a challenge in extracting data from the request body. This led to unexpected errors that needed to be resolved for proper data handling. Upon my attempt to retrieve data from the request body using ...

javascriptmongodbbase64serverless

AJAX Finished Reply

I have successfully implemented a password change function on my website, but I am encountering an issue with displaying a success or fail message. Here is the structure of my HTML code: <form id="change_Pass" action="" method="post"> //stuff ...

phpjqueryhtmlajaxfieldset

Suggestions for correcting radio group alignment issues on mobile devices, aiming to align them at the top

When it comes to my radio button group, everything looks great on larger devices. However, on mobile view, the radio button ends up in the middle of the text. I would prefer it to be aligned at the top of the text. <Check out this image link for refere ...

htmlcssbootstrap-4

bespoke theme background hue

I currently have material-ui@next installed and I am attempting to customize the background color of the theme. Here is what I have tried: const customizedTheme = createMuiTheme({ palette: createPalette({ type: 'light', primary: purple ...

javascriptreactjsthemesbackground-colormaterial-ui

Move the Div element up and down when clicked

When a tag is clicked, the corresponding div opens and closes. I would like the div to slide down and up slowly instead of appearing immediately. <a href="" class="accordion">Click here</a> <div class="panel" id="AccordionDiv"> ...

javascriptjqueryhtmlcssangularjs

The Django base template that utilizes Bootstrap3 completely replaces the index.html file

I have set up a base.html file where I plan to house my bootstrap3 navbar and footer, which will be consistent across all pages of my website. However, the base.html and its corresponding CSS file seem to override all the content in the index.html file an ...

pythonhtmldjangotemplatestwitter-bootstrap-3

What is causing data duplication in javascript and how can it be resolved?

What causes the data in the cycle to be duplicated every time it is updated (after 5 seconds)? displayed: 2016-09-09 09:12:18 WARN SZ SIU05 [main] Started, locked port 7075 2016-09-09 09:37:03 WARN SZ SIU05 [main] Started, locked port 7075 2016- ...

javascriptphpjqueryajax

How can I determine which component the input is coming from when I have several components of the same type?

After selecting two dates and clicking submit in the daterange picker, a callback function is triggered. I have two separate daterange pickers for SIM dates and Phone dates. How can I differentiate in the callback function when the user submits dates from ...

javascriptjqueryhtmlangularjs

The Highchart chart is currently experiencing compatibility issues on both Chrome and Firefox

After designing a Highchart for my report, I encountered an issue where it wasn't displaying on Chrome and Firefox browsers. However, the chart was visible when using IE after enabling ActiveX. Can someone provide insight into why this discrepancy occ ...

javascriptphpjqueryhighchartsjquery-events

Using AJAX for initiating Liquid code upon page load

I was trying to create an onClick function that would add liquid code to the div when a certain link is clicked. However, instead of adding both the liquid code and its content, it was only adding the code itself. Here's the code snippet I used: Inde ...

javascriptjqueryhtmlajax

The issue of the URL base vanishing when included in an email through PHP

Every time I use PHP to send an email (with content generated by jQuery, AJAX POST to PHP), the base of the URL goes missing upon reaching the destination. For example, when I send an email with the following content: Click <a href="http://www.example ...

phpjqueryhtmlajaxemail

The rendering function of the model is not functioning

I've been struggling to incorporate my blender model into my website using three.js. Despite following various tutorials, I can confirm that the model works fine outside of three.js. If there's something crucial that I'm missing or need to d ...

javascriptthree.js

Changing the entire contents of an array through innerHTML manipulation

I've encountered a strange issue with my Javascript code. I'm trying to create a table row using document.createElement("tr") and an array of cells like this: cell = new Array(3).fill(document.createElement("td")); However, when I populate the c ...

javascriptarrays

The combination of jQuery html() method and the &amp; symbol is

While conducting a search among a list of individuals, I encountered an issue with displaying results on the fly. Specifically, I needed a link to appear as: chatid=18&userid=45&create=new However, after displaying the results using the following ...

phpjqueryhtml

Transform the appearance of a button when focused by utilizing CSS exclusively or altering it dynamically

As a newcomer to coding, I am currently working on a project that involves changing the color of buttons when they are clicked. Specifically, I want it so that when one button is clicked, its color changes, and when another button next to it is clicked, th ...

javascriptcssreactjs