}
.stickybar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: #fafafa;
    cursor: default;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.35);
    width: 100%;
    padding: 0 2em 0 0;
    font-size: 1.6em;
    z-index: 2000;
    height: 56px;
    line-height: 2em;
    transition: height 0.3s linear 0s, padding 0.3s linear 0s;
    transition: box-shadow 250ms;
}
.stickybar img {
    position: relative;
    top: 10px;
    left: 18px;
    object-fit: cover;
    width: 32px;
    height: 32px;
    z-index: 500;
    border-radius: 4px;
}
.stickybar h1 {
    position: absolute;
    left: 0;
    top: 2px;
    width:100%;
    display: block;
    margin: 0;
    padding: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;

  {{#compare album.title '==' 'Home'}}
    <div class="stickybar">
      {{#if settings.logo }}
      <img id="logo" src="{{settings.logo}}" title="{{settings.application}}"></img>
      {{/if}}
      <h1>{{gallery.title}}</h1>
    </div>
  {{/compare}}

        <h2 class="home">{{gallery.title}}</h2>

        <h2 class="home">{{settings.covertitle}}</h2>

      </div>  

      </div>

  <div class="header-notFixed">
      <p>{{{gallery.title}}}</p>
  </div>

      $(window).scroll(function () {
        if ($(window).scrollTop() >= 300) {
          $('header-fixed').hide();
          $('header-notFixed').show();
        } else {          
          $('header-notFixed').hide();
          $('header-fixed').show();
        }
      });