diff --git a/CHANGELOG.md b/CHANGELOG.md
index 76ca70b93..837e00d1c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,5 @@
+- **New option**: `Auto-hide header on scroll`.
+
## 3.13.0 - *2013-11-16*
- More index navigation improvements:
diff --git a/css/style.css b/css/style.css
index be2cc88bc..278565f97 100644
--- a/css/style.css
+++ b/css/style.css
@@ -141,6 +141,10 @@ a[href="javascript:;"] {
box-shadow: none;
transition: all .8s .6s cubic-bezier(.55, .055, .675, .19);
}
+#header-bar.scroll:not(:hover) {
+ transition: -webkit-transform .2s !important;
+ transition: transform .2s !important;
+}
#header.top #header-bar.autohide:not(:hover) {
margin-bottom: -1em;
-webkit-transform: translateY(-100%);
diff --git a/src/General/Config.coffee b/src/General/Config.coffee
index de55119ff..086bb7262 100644
--- a/src/General/Config.coffee
+++ b/src/General/Config.coffee
@@ -144,12 +144,13 @@ Config =
'Index Sort': 'bump'
'Show Replies': true
Header:
- 'Header auto-hide': false
- 'Bottom header': false
- 'Header catalog links': false
- 'Top Board List': false
- 'Bottom Board List': false
- 'Custom Board Navigation': true
+ 'Header auto-hide': false
+ 'Header auto-hide on scroll': false
+ 'Bottom header': false
+ 'Header catalog links': false
+ 'Top Board List': false
+ 'Bottom Board List': false
+ 'Custom Board Navigation': true
QR:
'QR.personas': """
#email:"sage";boards:jp;always
diff --git a/src/General/Header.coffee b/src/General/Header.coffee
index 849e9ba24..2c72877bc 100644
--- a/src/General/Header.coffee
+++ b/src/General/Header.coffee
@@ -21,6 +21,8 @@ Header =
headerToggler = $.el 'label',
innerHTML: ' Auto-hide header'
+ scrollHeaderToggler = $.el 'label',
+ innerHTML: ' Auto-hide header on scroll'
barPositionToggler = $.el 'label',
innerHTML: ' Bottom header'
catalogToggler = $.el 'label',
@@ -35,30 +37,34 @@ Header =
textContent: 'Edit custom board navigation'
href: 'javascript:;'
- @headerToggler = headerToggler.firstElementChild
- @barPositionToggler = barPositionToggler.firstElementChild
- @catalogToggler = catalogToggler.firstElementChild
- @topBoardToggler = topBoardToggler.firstElementChild
- @botBoardToggler = botBoardToggler.firstElementChild
- @customNavToggler = customNavToggler.firstElementChild
+ @headerToggler = headerToggler.firstElementChild
+ @scrollHeaderToggler = scrollHeaderToggler.firstElementChild
+ @barPositionToggler = barPositionToggler.firstElementChild
+ @catalogToggler = catalogToggler.firstElementChild
+ @topBoardToggler = topBoardToggler.firstElementChild
+ @botBoardToggler = botBoardToggler.firstElementChild
+ @customNavToggler = customNavToggler.firstElementChild
- $.on @headerToggler, 'change', @toggleBarVisibility
- $.on @barPositionToggler, 'change', @toggleBarPosition
- $.on @catalogToggler, 'change', @toggleCatalogLinks
- $.on @topBoardToggler, 'change', @toggleOriginalBoardList
- $.on @botBoardToggler, 'change', @toggleOriginalBoardList
- $.on @customNavToggler, 'change', @toggleCustomNav
- $.on editCustomNav, 'click', @editCustomNav
+ $.on @headerToggler, 'change', @toggleBarVisibility
+ $.on @scrollHeaderToggler, 'change', @toggleHideBarOnScroll
+ $.on @barPositionToggler, 'change', @toggleBarPosition
+ $.on @catalogToggler, 'change', @toggleCatalogLinks
+ $.on @topBoardToggler, 'change', @toggleOriginalBoardList
+ $.on @botBoardToggler, 'change', @toggleOriginalBoardList
+ $.on @customNavToggler, 'change', @toggleCustomNav
+ $.on editCustomNav, 'click', @editCustomNav
- @setBarVisibility Conf['Header auto-hide']
- @setBarPosition Conf['Bottom header']
- @setTopBoardList Conf['Top Board List']
- @setBotBoardList Conf['Bottom Board List']
+ @setBarVisibility Conf['Header auto-hide']
+ @setHideBarOnScroll Conf['Header auto-hide on scroll']
+ @setBarPosition Conf['Bottom header']
+ @setTopBoardList Conf['Top Board List']
+ @setBotBoardList Conf['Bottom Board List']
- $.sync 'Header auto-hide', @setBarVisibility
- $.sync 'Bottom header', @setBarPosition
- $.sync 'Top Board List', @setTopBoardList
- $.sync 'Bottom Board List', @setBotBoardList
+ $.sync 'Header auto-hide', @setBarVisibility
+ $.sync 'Header auto-hide on scroll', @setHideBarOnScroll
+ $.sync 'Bottom header', @setBarPosition
+ $.sync 'Top Board List', @setTopBoardList
+ $.sync 'Bottom Board List', @setBotBoardList
$.event 'AddMenuEntry',
type: 'header'
@@ -66,6 +72,7 @@ Header =
order: 105
subEntries: [
{el: headerToggler}
+ {el: scrollHeaderToggler}
{el: barPositionToggler}
{el: catalogToggler}
{el: topBoardToggler}
@@ -178,6 +185,28 @@ Header =
'The header bar will remain visible.'
new Notice 'info', message, 2
+ setHideBarOnScroll: (hide) ->
+ Header.scrollHeaderToggler.checked = hide
+ if hide
+ $.on window, 'scroll', Header.hideBarOnScroll
+ return
+ $.off window, 'scroll', Header.hideBarOnScroll
+ $.rmClass Header.bar, 'scroll'
+ $.rmClass Header.bar, 'autohide' unless Conf['Header auto-hide']
+ toggleHideBarOnScroll: (e) ->
+ hide = @checked
+ $.set 'Header auto-hide on scroll', hide
+ Header.setHideBarOnScroll hide
+ hideBarOnScroll: ->
+ offsetY = window.pageYOffset
+ if offsetY > (Header.previousOffset or 0)
+ $.addClass Header.bar, 'autohide'
+ $.addClass Header.bar, 'scroll'
+ else
+ $.rmClass Header.bar, 'autohide'
+ $.rmClass Header.bar, 'scroll'
+ Header.previousOffset = offsetY
+
setBarPosition: (bottom) ->
Header.barPositionToggler.checked = bottom
$.event 'CloseMenu'