How to specify cookie to show on whole site until closed?

I've made a div that shows once per day for a user until he closes it, but the problem I have is that after going to shop and back to start site it closes automatically.

I would like some suggestions about fixing this.

I've tried using document.cookie = 'hidecookier=1; domain=; expires=... instead of document.cookie ='hidecookie=1; path=/; expires=... After putting domain= instead of path= I can't close the div anymore, it just stays there until page refresh or until going to shop and back to start site.

$(function() {
  $('#header').trigger('onload');
});

function setCookieHeaderCounter() {
  if (document.cookie.indexOf('cookieheaderCounter=2') === -1) {
    if (document.cookie.indexOf('cookieheaderCounter=1') === -1) {
      document.cookie = 'cookieheaderCounter=1; path=/;';

    } else if (document.cookie.indexOf('cookieheaderCounter=1') !== -1) {
      document.cookie = 'cookieheaderCounter=2; path=/;';
    }
  }
}

function setCookieHeader() {
  var ablauf = new Date();
  var inXTagen = ablauf.getTime() + (24 * 60 * 60 * 1000); // 1 Tage
  ablauf.setTime(inXTagen);
  document.cookie = 'hidecookieheader=1; domain=; expires=' + ablauf.toGMTString();
}

if (document.cookie.indexOf('hidecookieheader=1') !== -1 || document.cookie.indexOf('cookieheaderCounter=2') !== -1) {
  jQuery('#header').hide();
} else {
  jQuery('#header').prependTo('meta_navi');
  jQuery('.header').show();
}

<div id="header" onload="setCookieHeaderCounter()">
  <span style="font-weight: bold;"><a class="header" href=""><b></b></a></span>
  <div class="close-btn"><span id="close" class="" onclick="setCookieHeader();jQuery('#header').slideUp" style="margin-top: -8px; float: right; color: #fff; font-size: 23px;"></span></div>
</div>

To be clear, I want to show div #header on the whole site until someone closes it with span #hinweis-close. It can go away on refresh, that doesn't matter.

Solution

use https://github.com/js-cookie/js-cookie by adding <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js"></script>
Use this code DEMO

$(function() {
  var closed = Cookies.get('hinweis');
  if (!closed) {
    $('#hinweis_header').show();
  } 

  $('#hinweis-close').on('click',function() {
    Cookies.set('hinweis', 'seen');
    $('#hinweis_header').slideUp();
  });
});

#hinweis-close {
  margin-top: -8px;
  float: right;
  color: #fff;
  font-size: 23px;
}
#hinweis_header { display:none }

<div id="hinweis_header">
  <b><a class="hinweis-header" href="<?=SHOP_URL_HTTPS?>/<?=$param["links"]["service"]?>/<?=$sprachdatei["links"]["link_hinweis"]?>">Nur heute: 10 % auf alle Jersey Stoffe >><?=$sprachdatei['header']['hinweis_header']?></a></b>

  <div class="close-btn"><span id="hinweis-close" class="rwd-buttinette-icon rwd-icon-remove-circle-1"></span></div>
</div>