scroll with position: fixed losing the right margin

Navigation
1

When I scroll down, the chat # div will get everything fixed. But the problem is that the layout breaks down the right margin. How can I resolve this problem? 

$(document).ready(function() {

   var nav = $('#chat');

   $(window).scroll(function() {
     if ($(this).scrollTop() > 300) {

       nav.addClass("f-nav");
     } else {
       nav.removeClass("f-nav");
     }
   });

   
 });
    .f-nav {
        z-index: 9999;
        position: fixed;
        top: 0;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divstyle="width:100%; display:flex;">

  <div style="width:70%; height: 2000px; background-color: #ff9d58; margin:10px;">
  </div>


  <div id="chat" style="width:30%; height: 400px; background-color:#22792d; margin:10px;">
  </div>

</div>
    
asked by anonymous 04.07.2015 / 20:28

1 answer

1

I suggest doing this with float and percentages. The problem you are having is because when the element passes fixed it leaves the block and starts to occupy its real space.

Real space?

Yes, you are giving 70% to one div and 30% to another, but also < margin: 10px to both. Now this is more than 100% , so when div#chat becomes fixed the other takes the real space of 70% + 10px . Downloading width % already solved the problem: link

I would also like to put the whole CSS apart, not inline in HTML as it is easier to keep the code.

Doing everything with percentages: 

body > div >div:first-child {
    float: left;
    width:68%;
    height: 2000px;
    background-color: #ff9d58;
    margin-left:1.5%;
}
#chat {
    float: left;
    width:28%;
    height: 400px;
    background-color:#22792d;
    margin-left:1.5%;
}

jsFiddle: link

    
05.07.2015 / 01:24
Problem related to Vagrant when running vagrant up on mac os x Regular expression in PHP