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

The ReactDom reference is not defined when working with React and webpack

Is it possible to utilize the package.json "resolutions" field to replace lodash with lodash-es?

Are elements loaded and hidden by ng-hide and ng-show, or does loading only occur with ng-show?

Having trouble receiving the response from PHP after making an AJAX request

Looking to modify the styling of links in an unordered list?

Quiz12 - The Influence of Inheritance on CSS

Embedding the scrollbar within the div container

Prevent a click event from triggering on one div when another div is clicked using jQuery

The C# [WebMethod] will not trigger if the Content-Type "application/Json" is missing

What is the significance of combining two arrays?

What steps should be taken to ensure that the onmouseover and onmouseout settings function correctly?

Is there a way to modify my code to eliminate the need for a script for each individual record?

Implementing Dynamic Checkbox Selection using JavaScript

Managing server JSON objects in Adobe AIR

Is there a method to bypass the need for app.get() for each static file in express?

Endless stream of text flowing in a continuous line within each paragraph

Can you explain the concept of 'each' when using the looping method in jQuery?

Initiate CSS3 animations on each individual slide within the slider

How to eliminate the vertical scroll indicators in Material UI's TextField

Mastering the art of combining images and text harmoniously