Creating an animated sidebar that moves at a different speed than the rest of the

Question

Creating an animated sidebar that moves at a different speed than the rest of the

I have a layout with a large sidebar and small content, where the "Fixed part" refers to sticky positioning.

I'm attempting to achieve this using scrollTop, but the sidebar is causing some issues like this:

The code should only be executed when the height of the main content is less than the sidebar content height.

This is the code from my latest attempt:

function sidebarParallax(expertStatisticsHeight) {
        var sidebar = $('aside.site-aside');
        var main = $('main.site-content');
        var footer = $('footer');
        var c = 1;

        sidebar.css({
            position: 'absolute',
            right: 0,
            width: $(document).width() - main.width(),
        });

        if ((expertStatisticsHeight + $banner.height()) > main.height()) {
            var speed = c - (main.height() / sidebar.height());

            sidebar.css('transform', 'translateY(' + -speed + 'px)');
        } else {
            sidebar.removeAttr('style');
        }
    }

How can I ensure that when I scroll to the bottom, the bottom of the sidebar aligns with the bottom of the content?

Thank you in advance!

javascript jquery html css frontend

Answer 1

Answer №1

Finally cracked the code!

let sidePanel = $('aside.site-aside');
let mainContent = $('main.site-content');
let banners = $('.section-banner');
let bannerCount = banners.length;
let isMainSmallerThanSidePanel = initialize();

$(window).resize(checkDimensions);

$(document).ajaxComplete(checkDimensions);

$(window).scroll(function() {
    if (isMainSmallerThanSidePanel) {
        return moveSidePanel();
    }
});

function checkDimensions() {
    isMainSmallerThanSidePanel = initialize();
}

function moveSidePanel() {
    let scrolled = window.pageYOffset || document.documentElement.scrollTop;
    let scrollDifference = mainDistance - scrolled;
    let percentage = scrollDifference / mainDistance;
    sidePanel.css('top', -distance + (distance * percentage));
}

function initialize() {
    sidePanel.css({
        position: 'absolute',
        right: 0,
        width: $(document).width() - mainContent.width()
    });

    let isMainShorter = sidePanel.height() > mainContent.height();

    if (isMainShorter) {
        distance = sidePanel.height() - mainContent.height();
        mainDistance = $('main.site-content').height() - document.documentElement.clientHeight;
        moveSidePanel();
    } else {
        sidePanel.removeAttr('style');
    }

    return isMainShorter;
}

Answer 2

Finally cracked the code!

let sidePanel = $('aside.site-aside');
let mainContent = $('main.site-content');
let banners = $('.section-banner');
let bannerCount = banners.length;
let isMainSmallerThanSidePanel = initialize();

$(window).resize(checkDimensions);

$(document).ajaxComplete(checkDimensions);

$(window).scroll(function() {
    if (isMainSmallerThanSidePanel) {
        return moveSidePanel();
    }
});

function checkDimensions() {
    isMainSmallerThanSidePanel = initialize();
}

function moveSidePanel() {
    let scrolled = window.pageYOffset || document.documentElement.scrollTop;
    let scrollDifference = mainDistance - scrolled;
    let percentage = scrollDifference / mainDistance;
    sidePanel.css('top', -distance + (distance * percentage));
}

function initialize() {
    sidePanel.css({
        position: 'absolute',
        right: 0,
        width: $(document).width() - mainContent.width()
    });

    let isMainShorter = sidePanel.height() > mainContent.height();

    if (isMainShorter) {
        distance = sidePanel.height() - mainContent.height();
        mainDistance = $('main.site-content').height() - document.documentElement.clientHeight;
        moveSidePanel();
    } else {
        sidePanel.removeAttr('style');
    }

    return isMainShorter;
}

Creating an animated sidebar that moves at a different speed than the rest of the

Answer №1

Similar questions

Leveraging ng-click and ng-hide/show directives within ng-repeat in Angular

Difficulty encountered while integrating chart.js with Django using npm

Increasing the values of jQuery variables

Displaying entries of input data

CSS animations for loading page content

Tips for choosing nested elements with basic CSS selectors like nth-of-type or nth-child for Selenium

store events in a MySQL database using a servlet callback and display them on a full calendar

Updating a query parameter with jQuery

Revolutionary Notification System - Harnessing the Power of Cutting-Edge notification

How can I access the id_lang variable in React JS from outside its scope?

Aligning a table at the center of another table

The Npm generate script is failing to create the necessary routes

Struggling to display a chart using angular-chart

What about a Material UI-inspired homepage design?

highlight the selected option in the ng-repeat list of items

How to format numbers with commas in AngularJS to make them easier to read

Achieving data synchronization and sequencing with AngularJS promises at a 1:1 ratio

Steps for removing an item from an array using lodash

Learn how to instruct ajax to fetch the designated information and retrieve corresponding data from the database based on the selected criteria

Is each individual character displayed on the web page twice when using a controlled component?