Using jQuery to animate based on scrolling to a specific location

Currently, I am working on a smooth scroll effect where an element's top padding reduces gradually as the user scrolls. Simultaneously, I want two child elements to fade - one fading out and the other fading in. While I have achieved the fading effect successfully, I am encountering issues with adjusting the top padding. Can someone spot what might be causing the problem in my function?

$(window).scroll(function () { 
    $('.transitionParent').css({
        'padding-top' : $(this).scrollTop()-($(this).scrollTop()/500)
    });
    $('.ipadOutline').css({
        'opacity' : 1-($(this).scrollTop()/500)
    });
    $('.ipadPhoto').css({
        'opacity' : 0+($(this).scrollTop()/500)
    });
});

http://jsfiddle.net/pXdhB/1/

I have also attempted the following approach (without success!)

var fromTop = $(window).scrollTop();
$('.transitionParent').css('padding-top', '-' + (100 - fromTop));
javascriptjqueryhtmlcss

Answer №1

Is this similar to what you're looking for?

EXAMPLE http://jsfiddle.net/pXdhB/7/

JAVASCRIPT

$(window).scroll(function () {
    $('.transitionParent').stop().animate({
        'padding-top': $(this).scrollTop() - ($(this).scrollTop() / 500)
    }, 1000, function () {
        // Animation complete.
    });
    $('.ipadOutline').css({
        'opacity': 1 - ($(this).scrollTop() / 500)
    });
    $('.ipadPhoto').css({
        'opacity': 0 + ($(this).scrollTop() / 500)
    });
});

Answer №2

Is this the way you want it?


$(window).scroll(function () { 
    $('.transitionParent').css({
        'padding-top' : 100 - ($(this).scrollTop()-($(this).scrollTop())/500)
    });
    $('.ipadOutline').css({
        'opacity' : 1-($(this).scrollTop()/500)
    });
    $('.ipadPhoto').css({
        'opacity' : 0+($(this).scrollTop()/500)
    });
});

http://jsfiddle.net/DkM8a/

Answer №3

Give this a try. Below is the code you need:

var st = $(this).scrollTop(),
    newPt = 100 - st;

console.log(st + " " + newPt)
if (newPt > 0) {
    $('.transitionParent').css({
        'padding-top' : newPt
    })
}

Check out the demo here: http://jsfiddle.net/pXdhB/8/

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

Embracing Interfaces Over 'any' Types in TypeScript

https://i.stack.imgur.com/W6NMa.pngWould it be beneficial to utilize an interface as a variable type rather than opting for any? For instance, if I have 3 functions where I am declaring variables that can contain alphanumeric data, would defining them us ...

javascripttypescript

I'm currently working with React and experiencing issues with my components being unrendered

I'm currently navigating a React tutorial and I'm having issues getting this code to display some buttons. I'm utilizing codepen.io to work on the code and can provide the tutorial link if needed. const clips = [ { keyCode: 81, key ...

javascripthtmlreactjs

Issue with Laravel: CKEditor text not loading HTML tags

Could you assist me with this? click here for the image description image description available here ...

javascriptphphtmllaravelckeditor

Retrieve data from cookies that have been stored by the node server on the front end

I am currently utilizing the Node package 'cookie' to establish cookies from the backend as shown below: res.setHeader('Set-Cookie', cookie.serialize('token', token, { maxAge: 60 * 60 * 24 * 7 // 1 week ...

javascriptnode.jscookiesnpmsetcookie

Tips for getting rid of Next.js' default loading indicator

While working on my project using Next.js, I've noticed that whenever I change the route, a default loading indicator appears in the corner of the screen. https://i.sstatic.net/FVWEU.gif Does anyone know how to remove this default loading indicator ...

javascriptnext.js

Setting up automatic CSS linting in a Vue.js project for seamless correction

Is there a way to enforce linting on the <style> segment within a .vue file while coding? I have set up eslint (with airbnb ruleset)+prettier for the <template> and <script> sections, which includes some auto-correction upon saving, but I ...

cssvue.js

Is it possible to combine Django urls and Vue routes in a single project?

After setting up my Django app and implementing the authentication layer using Django-Allauth with features like email confirmation, password reset, and two-factor authentication, I've come to the realization that for my app's interactive nature ...

javascriptpythondjangovue.jsfrontend

Creating HTML inputs dynamically using jQuery in an ASP.NET application

I have written this JavaScript code to dynamically generate and add HTML elements within my asp.net webform: var i = 0; function addFields() { i++; var quantity = '<td class="auto-style2"><input type="text" size="3" name= ...

javascriptjqueryhtmlasp.net

"Successfully tested API request in Postman, however encountering issues when sending request in Node.js using the 'request

Currently, I am tackling a project that involves communicating with an API using nodeJS. It's quite a substantial project, so I'll provide you with a simplified version of my script. When I make a PUT request to the API using Postman, everything ...

javascriptnode.jsapipostman

Stop unauthorized access to JSON Web Service

I have a unique webservice that involves inserting a specific piece of JavaScript code onto the webpage. This JavaScript is responsible for scanning the page in search of a particular string, triggering a call to my ASP.NET JSON WebService. The resulting J ...

jqueryajaxweb-servicesjsonsecurity

Blocking the space bar in JavaScript is a useful technique that can be

I'm in the process of developing an application and I'm looking to prevent the space bar from scrolling my page My framework of choice is VUE, and I am trying to trigger a method using an event handler However, when I attempt to call the ' ...

javascriptvue.js

The form is refusing to submit even after using the "return false

Even after adding validation to the form, it still submits when the script returns false. The Form Submission <form action=payment.php method=POST name=UserForm id=UserForm onsubmit="return check(this); return false;"> Javascript Code function ch ...

javascriptjquery

Expanding a CSS div when the content wraps on smaller screens

When viewing the menu on standard screens, everything looks good. However, on smaller screens, the menu items start to wrap which is fine. The only issue is that the containing div #nav does not automatically enlarge along with it. I would like for the div ...

css

Transform written content into visual data using canvas technology

Trying to develop a basic application that converts form data into an image. For instance, when the form is filled out dynamically and submitted, the goal is to translate the input into an image. Is it possible to achieve this using just javascript, vue. ...

javascriptformsimagereactjsvue.js

Using jQuery AJAX to Transfer Data to a PHP Script

There is a div element with a data-id attribute. The goal is to use jQuery to detect when this div is clicked and then send or store the corresponding data-id value in a PHP file. However, the code provided raises an error when trying to obtain the data-id ...

phpjqueryhtmlajax

What is the best way to display value in a dropdown option field using Laravel?

I am currently working with 3 tables: hosts, visitors, and visitor_types. My objective is to display the host name and visitor type in a drop-down option button. However, I find myself a bit perplexed when it comes to the controller and route code. I have ...

phphtmlcsslaravel-5bootstrap-4

I'm experimenting with using jQuery toggle to switch between text and images on my webpage

I attempted to use jquery "toggle" in order to hide the div containing text and display an image instead, and vice versa. However, when I click on the button, it does not work as expected. The button is from a bootstrap example - could that be the source o ...

javascripthtmljquery

Switching the link text in a Bootstrap navbar when hovered over

Is there a way to change the shortened text in my Bootstrap 4 navbar links to display the full text on hover? The full text is available in the title element and I would also like to add a small change animation for extra effect... Thank you <div class ...

javascripthtmlcssbootstrap-4navbar

IE8 Image Links Not Working Without Chrome Frame Enabled

Upon visiting the website below, you'll notice a slideshow featured at the top of the homepage. Utilizing Nivo Slider, our client has brought to our attention that the links are not operational in IE8. The issue may be related to the "slide-overlay" ...

jquerycssnivo-slidergoogle-chrome-frame

What is the best way to input keys without losing focus?

I am facing an issue with an HTML <input> field that displays autocomplete suggestions while the user is typing. I want to create an automated test using Selenium, where the driver inputs keys and then verifies the contents of the autocomplete dropdo ...

pythonhtmlseleniumselenium-webdriver