Fixed div when scrolling in different resolutions

Question

I have the following scenario.

• A banner at the top that picks up the entire screen viewport, regardless of the resolution
• Below it a menu that when scrolling down it stays at the top following the scroll and when climbing it stops below the banner, its initial position.

I made a script but I would have to predict all resolutions and I find it unfeasible, see below:

var $w = $(window);
var $larg = $(window).width();


if($larg >= 1280){
    $w.on("scroll", function(){
       if( $w.scrollTop() > 960 ) {
           $(".topo-fixo").css("position", "fixed");
       }else{
            $(".topo-fixo").css("position", "static");
       }
    });
}else if($larg > 1024 || $larg < 1279){
    $w.on("scroll", function(){
       if( $w.scrollTop() > 720 ) {
           $(".topo-fixo").css("position", "fixed");
       }else{
            $(".topo-fixo").css("position", "static");
       }
    });
}if($larg < 1024){

   $(".topo-fixo").css("position", "fixed");        

}

Where $w is the height of the viewport and $larg the screen resolution in width.

How could I make this script so that it picks up the height after the banner regardless of its resolution, desktop or mobile?

Remembering that the banner fits any resolution, so its height varies

Thanks in advance!

Answer 1

var w = document.getElementById('banner').innerWidth
var h = document.getElementById('banner').innerHeight

or

var w = $('.banner').innerWidth
var h = $('.banner').innerHeight

or

var w = document.getElementById('banner').offsetWidth
var h = document.getElementById('banner').offsetHeight