cookie thing with stick to top menu

by John Doe

HTML

<div class="warn">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi reiciendis non rerum ratione velit, corporis, cumque.
  </p>
  <div class="buttons">
    <button class="accept">Accept</button>
    <button class="details">Details</button>
  </div>
</div>
<div class="wrap">
<ul class="menu">
  <li class="logo"><a href="#">Loboo</a></li>
  <li><a href="#">First</a></li>
  <li><a href="#">Second</a></li>
  <li><a href="#">Third</a></li>
  <li><a href="#">Fourth</a></li>
  <li><a href="#">Fifth</a></li>
</ul>
<div class="content">
  <h2>
    loboo take my orders!
  </h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint quia molestiae sapiente, earum! Necessitatibus suscipit qui minima praesentium, placeat, dicta recusandae ex omnis repellat sunt, asperiores! Tenetur, error, labore! Neque!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti autem, porro, doloremque iusto odio aut, quos animi unde aliquam, hic repellat non? Iure necessitatibus cumque consequuntur iste animi pariatur tempora.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores fugit deserunt, maxime laborum nostrum dolorem illo quam culpa hic voluptas cumque sunt laboriosam? Tempore velit saepe, eum distinctio nisi, architecto.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut fugit ex, earum possimus explicabo quidem, quam at reprehenderit fuga commodi quia. Harum dolore fuga earum animi culpa, nisi minus fugit.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim placeat voluptatum vel id porro atque quo, sed officiis alias labore ab perspiciatis? Labore impedit officia cum ipsa ipsam, magnam, molestias.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam laudantium magni inventore temporibus deserunt autem ipsum beatae ab veniam nihil praesentium, numquam dolorum eius corrupti fuga consectetur eum provident iste.
    Lorem ipsum dolor sit amet, consectetur...

SCSS

*, *:after, *:before{
  box-sizing:border-box;
}
body{
  margin: 0;
  font-family: arial;
}
button{
  cursor: pointer;
}
.warn{
  position: fixed;
  top: 0;
  background-color: rgba(12, 118, 182, 0.1);
  padding: 15px;
  height: 100px;
  overflow: hidden;
  transition: height 300ms ease-in-out, padding 300ms ease-in-out;
  .buttons{
    text-align: right;
  }
  p{
    margin: 0 0 5px 0;
    color: #0D77B0;
  }
  button{
    border: 1px solid red;
    .accept{
      
    }
    .details{
      
    }
  }
}
.wrap{
  margin-top:100px;
  background-color: #ffffff;
  position: relative;
  z-index: 2;
  .content{
    padding: 0 15px;
    &.stick{
      padding-top: 30px;
    }
  }
  p{
    margin: 0 0 5px 0;
  }
}
.menu{
  padding: 5px 15px;
  height: 30px;
  margin: 0;
  background-color: #0D77B0;
  display: inline-block;
  width: 100%;
  &.stick{
    position: fixed;
    top: 0;
  }
  li{
    float: left;
    list-style-type: none;
    a{
      color: #fff;
      text-decoration: none;
      margin-right: 2px;
      padding: 0 6px;
      height: 20px;
      line-height: 20px;
      &:hover{
        background-color: #ffffff;
        color: #0D77B0;
      }
    }
    &.logo{
      font-weight: bold;
    }
  }
}

JavaScript

var setcookie = function () {
	$('.warn').css('height','auto');
	var warnHeight = $('.warn').outerHeight();
    $('.wrap').css('margin-top',warnHeight+'px');
};
$(document).ready(function () {
	setcookie();
});
$(window).resize(function(){
	setcookie();
});
$(window).scroll(function () {
	var scrollTop = $(this).scrollTop();
  var warnHeight = $('.warn').outerHeight();
  if(scrollTop > warnHeight){
      $('.menu').addClass('stick');
      $('.content').addClass('stick');
  }
  else{
  	$('.menu').removeClass('stick');
    $('.content').removeClass('stick');
  }
});
$('.accept').click(function () {
	$('.wrap').css('margin-top','0px');
  $('.wran').css('height','0px');
  $('.menu').addClass('stick');
      $('.content').addClass('stick');
});