Move fixed div along with browser scrollbar horizontally

Question

I have an unsolved complication... I thought, I thought and I couldn’t solve.

body{
min-width:900px;
min-height:700px;
}
#topo{
margin-top:0px;
position:fixed;
width:100%;
height:40px;
background:black;
color:white;
}
barra_esquerda{
margin-top:45px;
position:fixed;
width:40px;
height:300px
background:black;
color:white;
}

In this example above I believe that it serves, by decreasing the dimension of the browser being inferior to the min-width and min-height will appear the scrollbar browser, and the site is all in Absolute, so when I move the bars scroll these Ivs stay fixed because they are fixed, the div #top all right, but the #leftbar I would like you to move also but leaving her in Absolute when moving the scroll in vertical it goes up but I don’t want it to go up, I would like that bar to be always visible and when moving the scrollbar in horizontal of the navigator she walked together.

I tried to leave the leftbar in Absolute turning into Fixed when moving the scroll with javascript, however Fixed does not move.

Answer 1

Dude, your CSS is not very good, I don’t think that’s the best way to do this... Anyway it follows an option, it basically replaces the position:fixed, for position:sticky thus the div left stands only on the axis Y at 55px from the top, but it is "free" on the axis X

To work right the left bar should not be larger than the window height, try using values in % if you are going to follow with this option

Follow the image code above:

  body{
min-width:900px;
min-height:700px;
}
#topo{
margin-top:0px;
position:fixed;
width:100%;
height:40px;
background:black;
color:white;
z-index: 1;
}
.barra_esquerda{
top:55px;
position:sticky;
width:40px;
height:100px;
background:black;
color:white;
}


  

<div id="topo">topo</div>
<div class="barra_esquerda">esquerda</div>
   

Answer 2

Change the properties margin-top for top and use left: 0 to position the elements correctly.

Then use the event scroll of window to toggle element properties when the .scrollLeft() is greater than or equal to 0. The .scrollLeft() greater than 0 means that a horizontal scroll has been made.

How the div is 45px from the top, when changing to position Absolute (when doing horizontal scroll), you need to add this distance to the window scroll, so that the div is always positioned at the correct distance from the top. By changing the div of fixed for absolute, it will accompany the horizontal scroll.

See how it looks:

$(window).on("scroll", function(){
   if($(window).scrollLeft() > 0){
      $("#barra_esquerda").css({
         "position": "absolute",
         "top": $(window).scrollTop()+45+"px"
      });
   }else{
      $("#barra_esquerda").css({
         "position": "fixed",
         "top": "45px"
      });
   }
});

body{
min-width:900px;
min-height:700px;
}
#topo{
top:0px;
left: 0;
position:fixed;
width:100%;
height:40px;
background:black;
color:white;
}
#barra_esquerda{
top:45px;
left: 0;
position:fixed;
width:40px;
height:300px;
background:black;
color:white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="topo">
   topo
</div>
<div id="barra_esquerda">
   barra_esquerda
</div>