Hello!
You would need to edit your theme's JavaScript in order to achieve that.
One thing to note about Narrative theme is that it use a minified version of its JavaScript asset - that means it has been mangled in such a way to reduce its size and aid compression i.e. save on network bandwidth. In order to make this change, you would need to apply changes to the non-minified version of the code, make sure the theme uses that instead of the minified version and either
- serve non-minified theme.js hence forth
- minify the modified version yourself and upload it to the Assets folder
I will show you how to make the theme use the non-minified version of theme.js and how to do the sticky nav change. I will not go in to details of how to minify JS assets.
Step 1
We will be making changes to files that cannot be reverted so better make a backup. Go to Online Store > Themes then Actions > Duplicate.
Step 2
Go to Actions > Edit code, open Layout / theme.liquid and find following
<!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'theme.min.js' | asset_url }}" defer="defer"></script><!--<![endif]-->
<!--[if lte IE 9]><script src="{{ 'theme.min.js' | asset_url }}"></script><![endif]-->Change that to be
<!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'theme.js' | asset_url }}" defer="defer"></script><!--<![endif]-->
<!--[if lte IE 9]><script src="{{ 'theme.js' | asset_url }}"></script><![endif]-->Notice that 'theme.min.js' changed to 'theme.js' in both occurrences. Hit Save. Great, now your theme is using the non-minified JS of that particular JS asset.
Step 3
Open Assets / theme.js.liquid and find following function
_toggleHeaderPosition: function() {
// Check if toggle is disabled by other settings
if (!scrollHandler || this.headerAnimating) return;
var scrollTop = $(document).scrollTop();
this.headerHeight = this.headerHeight || this.$container.outerHeight();
// Check which header transformation needs to happen. Also check if a toggle
// even needs to happen, i.e. if you're scrolling up and the header is
// already displayed, why call slideOut again?
// Debounce any style changes to the next frame using requestAnimationFrame
if (scrollTop <= 0) {
requestAnimationFrame(this._promiseHeaderReset.bind(this));
} else if (
scrollTop < this.scrollTop &&
scrollTop > 0 &&
!this.isFixed &&
!this.isAnimating
) {
requestAnimationFrame(this._promiseHeaderSlideIn.bind(this));
} else if (
scrollTop > this.scrollTop &&
scrollTop > this.headerHeight &&
this.isFixed &&
!this.isAnimating
) {
requestAnimationFrame(this._promiseHeaderSlideOut.bind(this));
}
this.scrollTop = scrollTop;
// The scroll event is fired randomly and is not guaranteed to fire when
// scrollTop === 0. Double check after a short period to see if we need to
// reset the header.
this._doubleCheckPosition();
},Replace for
_toggleHeaderPosition: function() {
// Check if toggle is disabled by other settings
if (!scrollHandler || this.headerAnimating) return;
var scrollTop = $(document).scrollTop();
var offset = 200;
if (scrollTop > offset && !this.isFixed && !this.isAnimating) {
requestAnimationFrame(this._promiseHeaderSlideIn.bind(this));
} else if (scrollTop < offset && this.isFixed && !this.isAnimating) {
requestAnimationFrame(this._promiseHeaderSlideOut.bind(this));
}
this.scrollTop = scrollTop;
// The scroll event is fired randomly and is not guaranteed to fire when
// scrollTop === 0. Double check after a short period to see if we need to
// reset the header.
this._doubleCheckPosition();
},Hit Save and check. You can play with the offset variable if you prefer the "stickyness" to kick in sooner or later.
Hope this helps!
I turn coffee in to code - since 1998
