markdownventure-stickymobileheader，顶部有公告栏(代码片段)

关键词：

#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! (ツ)