1

I need to have different offset in Headroom.js depending on screen size.

Enquire.js should do the trick, but I can't get it work properly. It only loads one offset setting per page load, even though it's the right one on load, but it doesn't switch to another setting when I resize the screen.

enquire.register("screen and (max-width: 48rem)", {

  // REQUIRED
  // Triggered when the media query transitions
  // from *unmatched* to *matched*
  match : function() { 
      Headroom.options = {
         offset : 0, };
  },

  // OPTIONAL   
  // Triggered when the media query transitions 
  // from a *matched* to *unmatched*                        
  unmatch : function() {

Headroom.options = {
         offset : 137, };

  },    

  // OPTIONAL
  // Triggered once immediately upon registration of handler
  setup : function() {

  },      

  // OPTIONAL
  // Defaults to false
  // If true, defers execution of the setup function
  // until the first media query is matched (still just once)
  deferSetup : true           
});
ransu
  • 11
  • 1
  • You're changing the default options (stored on the constructor), not the options for a particular instance. You would change it like this: `var hr = new Headroom(element, { offset : 456 }); hr.offset = 123;` – WickyNilliams Jan 15 '16 at 15:05

0 Answers0