"Implement a smooth scrolling animation on the page to automatically move a div element upward and lock

Question

"Implement a smooth scrolling animation on the page to automatically move a div element upward and lock

I am attempting to create a unique animation for a header div that involves moving it to the top of the screen when the user scrolls down. Once the header div reaches the top, I want it to stay fixed in that position. As the header div moves upwards, it will pass over a banner div. To enhance this transition, I have implemented a fading effect on the banner div based on the proximity of the header div to the top.

When the header div is fixed at the top and the banner div has completely faded out, I would like a reverse scroll action to trigger an animation that moves the header div back to its original position (margin-top: 400;) while simultaneously causing the banner div to fade back into view.

You can access my code on JSFiddle here: https://jsfiddle.net/xm33Laag/

check out the JSFiddle

Unfortunately, the functionality on the JSFiddle does not match that of my local version :S

While I can successfully move the header div to the top, I struggle to animate it back down. Additionally, I aspire for my animation to resemble the fluidity demonstrated in this example:

My preference is to refrain from using fullPage.js as I only require this specific function without the additional features it offers.

In the ideal example provided above, the animation initiates smoothly with a single scroll, lacking any initial jitters before the movement begins - a quality I truly admire!

Currently, my animation requires an initial scroll action to display 100px of abrupt movement before transitioning into the animated sequence. My aim is to seamlessly integrate these actions into one cohesive movement.

Thank you!

javascript jquery css animation fullpage.js

Answer 1

Answer №1

After experimenting with the layout, I decided to make some adjustments to the CSS by shifting the main content below the top margin instead of the .header. This approach made it easier for me to code.

For a live demonstration, you can check out this example: http://codepen.io/anon/pen/azrwog?editors=001

I also made significant changes to the JavaScript, here's the modified version:

var previous = 0, delta, initial = true, stopped;

$(window).scroll(function() {

clearTimeout(stopped);
var fromtop = $(window).scrollTop();
if (fromtop-previous > 0) delta = -1;
else delta = 1;
previous = fromtop;

if (fromtop < 400) {
var factor = 400-fromtop;
$('.banner').css({'height': factor, 'opacity': factor/400});
$('.header').removeClass('fixed');
if (delta == -1 && initial) firstScroll();
else if (delta == 1) scrollAction();
}
else $('.header').addClass('fixed');
});

function firstScroll() {
initial = false;
$('html, body').animate({scrollTop: 400}, 800);
}

function scrollAction() {stopped = setTimeout(function() {goTop()}, 200)}

function goTop() {
var topoffset = $(window).scrollTop();
$('html, body').animate({scrollTop: 0}, 2*topoffset, function() {
initial = true;
});
}

Additionally, I updated the solution to include smooth scrolling across different browsers using the mousewheel.js plugin:

You can view the updated version here: http://codepen.io/anon/pen/jEoGxG?editors=001

var fromtop, initial = true, stopped;

$(window).mousewheel(function(turn, delta) {

if (!initial) $('html, body').finish();

$(window).scroll(function() {

clearTimeout(stopped);
fromtop = $(window).scrollTop();

if (fromtop <= 400) {
changeOpacity();
$('.header').removeClass('fixed');
if (delta == 1) scrollAction();
}
else $('.header').addClass('fixed');
});

if (initial) {
if (delta == -1) $('html, body').animate({scrollTop: 400}, 800, function() {
initial = false;
});
return false;
}
});

function scrollAction() {stopped = setTimeout(function() {goTop()}, 200)}

function changeOpacity() {
var factor = 400-fromtop;
$('.banner').css({'height': factor, 'opacity': factor/400});
}

function goTop() {
var topoffset = $(window).scrollTop();
$('html, body').animate({scrollTop: 0}, 2*topoffset, function() {
initial = true;
});
}

An additional line of code has been added to prevent any 'sticking' behavior after the initial scroll:

if (!initial) $('html, body').finish();

Answer 2

After experimenting with the layout, I decided to make some adjustments to the CSS by shifting the main content below the top margin instead of the .header. This approach made it easier for me to code.

For a live demonstration, you can check out this example: http://codepen.io/anon/pen/azrwog?editors=001

I also made significant changes to the JavaScript, here's the modified version:

var previous = 0, delta, initial = true, stopped;

$(window).scroll(function() {

clearTimeout(stopped);
var fromtop = $(window).scrollTop();
if (fromtop-previous > 0) delta = -1;
else delta = 1;
previous = fromtop;

if (fromtop < 400) {
var factor = 400-fromtop;
$('.banner').css({'height': factor, 'opacity': factor/400});
$('.header').removeClass('fixed');
if (delta == -1 && initial) firstScroll();
else if (delta == 1) scrollAction();
}
else $('.header').addClass('fixed');
});

function firstScroll() {
initial = false;
$('html, body').animate({scrollTop: 400}, 800);
}

function scrollAction() {stopped = setTimeout(function() {goTop()}, 200)}

function goTop() {
var topoffset = $(window).scrollTop();
$('html, body').animate({scrollTop: 0}, 2*topoffset, function() {
initial = true;
});
}

Additionally, I updated the solution to include smooth scrolling across different browsers using the mousewheel.js plugin:

You can view the updated version here: http://codepen.io/anon/pen/jEoGxG?editors=001

var fromtop, initial = true, stopped;

$(window).mousewheel(function(turn, delta) {

if (!initial) $('html, body').finish();

$(window).scroll(function() {

clearTimeout(stopped);
fromtop = $(window).scrollTop();

if (fromtop <= 400) {
changeOpacity();
$('.header').removeClass('fixed');
if (delta == 1) scrollAction();
}
else $('.header').addClass('fixed');
});

if (initial) {
if (delta == -1) $('html, body').animate({scrollTop: 400}, 800, function() {
initial = false;
});
return false;
}
});

function scrollAction() {stopped = setTimeout(function() {goTop()}, 200)}

function changeOpacity() {
var factor = 400-fromtop;
$('.banner').css({'height': factor, 'opacity': factor/400});
}

function goTop() {
var topoffset = $(window).scrollTop();
$('html, body').animate({scrollTop: 0}, 2*topoffset, function() {
initial = true;
});
}

An additional line of code has been added to prevent any 'sticking' behavior after the initial scroll:

if (!initial) $('html, body').finish();

"Implement a smooth scrolling animation on the page to automatically move a div element upward and lock

Answer №1

Similar questions

Using the Jquery accordion function within google maps is limited to running only one time

Is there a method in Discord.JS to remove an embed from a message sent by a user?

Encountering an issue with Next.js React SSR using styled-jsx: unable to access the 'state' property as

What is the proper way to ensure a flex item takes up 50% of the space when a gap is included in

Showcasing interactive column titles by employing angularjs in an html table

Leverage Summernote in conjunction with Vue components to dynamically switch their locations

JavaScript-Based Header Features Similar to Excel

"Triggering ngClick causes ngSrc to update, however, the keydown event handler does not have

What could be causing the malfunction of client components in NextJS 13.3.0 with experimental features?

Troubleshoot: OffCanvas feature in Bootstrap 5 not functioning properly within navbar on small screens

Apply a specific style to the initial element generated by *ngFor

The banner may be cropped when viewing on lower resolutions such as mobile devices or when zoomed in

Change the text of a button by using an input field

What is the best way to ensure the footer is always positioned at the bottom of each page

Enhancing User Experience: Real-Time Preview in Text Area using Jquery

Utilizing Various Styles within a single Google Sheets Cell

The offspring of a React component

The min-height property in CSS appears to be ineffective on Jelly Bean

Guide to populating a full calendar using JSON information

Exploring ways to dynamically alter templates using the link function in Angular.js