div set when scrolling in different resolutions

I have the following scenario.

• A banner at the top that takes the entire viewport of the screen, regardless of the resolution
• Underneath it a scrolling menu that scrolls down to the top of the scrolling page, and when it scrolls up, it stops below the banner, its starting position.

I made a script but would have to predict all the resolutions and I find this impractical, 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 resolution of the screen in width.

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

  

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

Thanks in advance!