How can I change the CSS values of multiple elements when my sticky menu becomes fixed?

Question

I have a menu which is located beneath the page header as the page loads, but I want it to stick to the top of the page when the window is scrolled down to the point that the menu reaches the top of the page. I had this functionality working perfectly, however I also wanted some other changes to happen at the same point; I want the fixed logo to shrink down to fit the height of the (now-fixed) menu, as if it is within it.

I pretty much have all the CSS etc. nailed, as various iterations of my code have allowed me to test changes of individual elements, but I'm struggling to get the whole thing working smoothly together.

It may be worth noting that the site is responsive, although I'm not sure how relevant that will prove in finding a solution. The menu iteration I'm having trouble with is the desktop/tablet sized menu, not the mobile sized one.

I've prepared a couple of fiddles to illustrate my situation, one that has the code working in a very sketchy and undesirable manner, and one that I feel will be closer to the end result even though at this stage it isn't working:

1. JSFiddle with the functionality (somewhat) working: http://jsfiddle.net/TdjXt/1/ (in order to get it to work, you may have to mess around with your broswer window size and scrolling down enough for the sticky menu to engage).

2. JSFiddle demonstrating my current code: http://jsfiddle.net/TdjXt/2/ (this code isn't currently working, but as previously stated I feel this is probably closer to where it will end up than the other example.

Following is the particular piece of Jquery that I've been working on to include this functionality:

var stickerTop;
    var somethingelse;

    $(window).on("load resize", function(){

        stickerHeight = $('#sticker').height();
        stickerTop = parseInt($('#sticker').offset().top);
        somethingelse = parseInt($(window).scrollTop()) + parseInt($("#sticker").css('margin-top'));

        $(window).scroll(function(){

            if (somethingelse > stickerTop){
                $("#sticker").css({position:'fixed',top:'0px'});
                $(".logo").css({top:'3px', width:'127px', height: stickerHeight - 6});
                $(".logo img").css({float:'right'});
                $('#page').css('padding-top',stickerHeight + 20);
            }

            else {
                $("#sticker").css({position:'relative'});
                $(".logo").css({width: 'auto',height: 'auto', top: '17px'});
                $(".logo img").css({float:'none'});
                $('#page').css('padding-top','20px');
            }

        });

    });

Thanks :)

Answer 1

If I understand correctly what you mean (to move logo of Lamborghini without that strange effect of heading), then you may try to use this (copied from answer to question javascript - switch div from fixed to absolute at bottom of browser):

$(document).ready(function(){
$('ul[id]').css('display', 'none');
$('.Menu').css('position', 'relative');
$('.Menu').css('min-height', $('.Menu ul').height() );
$('.Menu ul').css('position', 'absolute');

var Menu_InnerPosition = $('.Menu > ul').position();

if( $('.Menu').height() < $('.Content').height() )
{
    $('.Menu').css('height', $('.Content').height() );
}

if( $('.Menu').innerHeight() > $('.Menu > ul').height() )
{
    $(window).scroll(function(){
        var ScrolledDown = $(window).scrollTop();
        var NewPosition = ScrolledDown - Menu_InnerPosition.top;
        var RemainingSpace = $('.Menu').innerHeight() - NewPosition;

        if( $('.Menu').height() < $('.Content').height() )
        {
            $('.Menu').css('height', $('.Content').height() );
        }

        if(RemainingSpace > $('.Menu > ul').height() )
        {
            $('.Menu > ul').css('top', NewPosition);
        }
    });
}
});

where

var Menu_InnerPosition = $('.Menu > ul').position();

says how much it is intended from top, in whole design

var ScrolledDown = $(window).scrollTop();

says how much page was scrolled down

var NewPosition = ScrolledDown - Menu_InnerPosition.top;

says new position from top

var RemainingSpace = $('.Menu').innerHeight() - NewPosition;

says how much free space is behind scrolled element (ul)

if(RemainingSpace > $('.Menu > ul').height() )
{
    $('.Menu > ul').css('top', NewPosition);
}

All you need to change is, element you need to move together with scrolling.