Is it possible to add css to an existing css class via jquery?

I have a sticky sidebar, and on desktop, The sidebar is sticky - so I toggle a class of

.fixed {top:20px; position:fixed}

when the sticky condition is met or not. My problem lies with "unsticking" the sidebar before it goes over the footer - my sidebar height is dynamic, as different things being open or closed changes the height - so the stop position changes.

My question is:

I need to add

css('top', dynamic-value);

to an EXISTING class - as this class is what will temporarily "unstick" the sidebar once it reaches the footer, and when removing this class (that contains the dynamic top value) the normal sticky navigation will commence.

When I say:

element.addClass('not-sticky')
$('.not-sticky').css('top',dynamic-value);

if condition is met and then element gets class not-sticky as expected, but the css gets added

to the dom, not the actual class as i specify. So when i then
removeClass('not-sticky');

it works as expected, but the dom still contains the

css('top',dynamic-value);

which stuffs up everything else.

So is there either a way to add css to an existing css class, that doesn't get added to the DOM OR is there a way to remove css that gets added to the dom?

//css
@include respond-to(desktop) {
        width: 310px;
        float: left;

    &.fixed {
        top: 20px;
        height: auto;
        position: fixed;
        }

    &.not-fixed {
        //top: 5656px;
        position: absolute;
    }

}

//jquery
$(document).scroll(function() {

        scrollTop = $(document).scrollTop();
        sidebar = $(".sidebar");
        sidebarFixed = sidebar.hasClass("fixed");
        sidebarHeight = sidebar.height();
        var footerTop = $('.footer').offset().top; // where footer starts

        // FIXED desktop navigation conditions
        var stickyDesktop = scrollTop > (sidebarOffset - 20);

        // STOP being sticky navigation condition
        // when the sidebar has scrolled far enough from the top of the document (scrollTop)
        // that the bottom of the sidebar (sidebar Height) hits the top of the footer (footerTop)
        // the 120 is to account for spacing between the top of the footer and bottom of sidebar
        var stickyLimit = (scrollTop + sidebarHeight + 120) > footerTop;


        // this is to be the top: diff for the .not-fixed class
        var diff = scrollTop - stickyLimit;

        if(windowWidth >= 1080) {
            // on desktop make sidebar sticky on scroll
            stickyDesktop = scrollTop > (sidebarOffset - 20);
            sidebar.toggleClass('fixed',stickyDesktop);

            // if the navigation is sticky
            if(sidebarFixed === true) {
                pageIntro.slideUp(300);
            } else {
                pageIntro.slideDown(300);
            }

            // if condition to stop fixed navigation is met
            if (stickyLimit === true) {

                stickyLimit = (scrollTop + sidebarHeight + 120) > footerTop;

                // stop nav being sticky
                sidebar.addClass('not-fixed');
                // THIS CSS DOESN'T GET ADDED TO THE CLASS BUT TO THE DOM
                $(".not-fixed").css('top',diff);


            } else {
                // regular sticky again
                sidebar.removeClass('not-fixed');
            }
        }

    }); // end document scroll function