Pass variables in Jquery . css()

Question

I’m having trouble with the following code:

//Desktop = D
var posicaoMenuD = $('#desktop-menu').position().top();
$(document).scroll(function(){//Alscutador de scroll da página
    var posicaoScrollD = $(document).scrollTop(); //Obtém o scroll atual (posição)
    if (posicaoMenuD < posicaoScrollD){
        $("#desktop-menu").css('top':$("#desktop-top-menu").height().val());
    }
});

I’m trying to pass variables on the property .css() of jquery, however, unsuccessfully, I tried to declare the variable before too, but likewise it did not work, in the console, the message:

scrolls-home.js:6 Uncaught SyntaxError: missing ) after argument list

I would like to know how I can solve such a problem, and if possible an explanation accompanied by the code, because I want to understand what is going on.

Answer 1

Try to replace this line:

$("#desktop-menu").css('top':$("#desktop-top-menu").height().val());

for this:

$("#desktop-menu").css('top', $("#desktop-top-menu").height() + 'px');

According to your error, this is a syntax problem. To set a value, the method .css takes two parameters. The first is the attribute you want to modify, and the second, the value.

When you are modifying values like top, margin, padding, do not forget to provide the value along with the measure, as if to write in css itself.

EDITED

Edited to insert here the fiddle created by @Leonardorodrigues with a demo: https://jsfiddle.net/leonardorodrigues/8ptLbgnt/