markdown Venture - Sticky Mobile Header，顶部有公告栏

Posted 2021-05-05

#What you want:

[![alt](https://screenshot.click/31-06-mt8o8-qnnh2.gif)](https://screenshot.click/31-06-mt8o8-qnnh2.gif)

#How to get it (SCSS / JS):

1. Add the following to the bottom of the theme.scss.liqiuid file:
```
@include media-query($small) {
  #shopify-section-header .site-header__upper {
    position: fixed;
    top: 42px;
    left: 0;
    display: block;
    z-index: 1000;
    background-color: $color-header;
  }
}
.notification--active {
  position: relative;
  display: inline-block;
}
@include media-query($small) { 
  .notification--active {
    position: fixed;
    top: 0;
  }
}
```

2. Add the following to the bottom of the theme.js file:
```
$(document).ready(function() {
  
  var notificationHeight = $('#NotificationPromoClose').outerHeight();
  var headerHeight = $('#shopify-section-header .site-header__upper').outerHeight();  	
  var mobileSize = 750;  
 
  // push header up if notification is closed
  $('#NotificationPromoClose').on('click',function(){
    $('#shopify-section-header .site-header__upper').css('top',0);
  });
  
  // check if notification bar is already closed on load of page
  if(notificationHeight == 0) {
    $('#shopify-section-header .site-header__upper').css('top',0);
  }  
  
  // push the slider down by the height of the header and promo bar on mobile
  $(window).resize(function() {
    if($(window).width() <= mobileSize){
      $('#MainContent').css('margin-top', headerHeight + notificationHeight);
    } else {
      $('#MainContent').css('margin-top', 60)
    }
  }).resize();
});
```

That is all! (ツ)