Showing
1 changed file
with
19 additions
and
5 deletions
| ... | @@ -74,15 +74,15 @@ window.setupPageShow = module.exports = function (pageId) { | ... | @@ -74,15 +74,15 @@ window.setupPageShow = module.exports = function (pageId) { |
| 74 | // Make the book-tree sidebar stick in view on scroll | 74 | // Make the book-tree sidebar stick in view on scroll |
| 75 | var $window = $(window); | 75 | var $window = $(window); |
| 76 | var $bookTree = $(".book-tree"); | 76 | var $bookTree = $(".book-tree"); |
| 77 | + var $bookTreeParent = $bookTree.parent(); | ||
| 77 | // Check the page is scrollable and the content is taller than the tree | 78 | // Check the page is scrollable and the content is taller than the tree |
| 78 | var pageScrollable = ($(document).height() > $window.height()) && ($bookTree.height() < $('.page-content').height()); | 79 | var pageScrollable = ($(document).height() > $window.height()) && ($bookTree.height() < $('.page-content').height()); |
| 79 | // Get current tree's width and header height | 80 | // Get current tree's width and header height |
| 80 | var headerHeight = $("#header").height() + $(".toolbar").height(); | 81 | var headerHeight = $("#header").height() + $(".toolbar").height(); |
| 81 | var isFixed = $window.scrollTop() > headerHeight; | 82 | var isFixed = $window.scrollTop() > headerHeight; |
| 82 | - var bookTreeWidth = $bookTree.width(); | ||
| 83 | // Function to fix the tree as a sidebar | 83 | // Function to fix the tree as a sidebar |
| 84 | function stickTree() { | 84 | function stickTree() { |
| 85 | - $bookTree.width(bookTreeWidth + 48 + 15); | 85 | + $bookTree.width($bookTreeParent.width() + 15); |
| 86 | $bookTree.addClass("fixed"); | 86 | $bookTree.addClass("fixed"); |
| 87 | isFixed = true; | 87 | isFixed = true; |
| 88 | } | 88 | } |
| ... | @@ -101,13 +101,27 @@ window.setupPageShow = module.exports = function (pageId) { | ... | @@ -101,13 +101,27 @@ window.setupPageShow = module.exports = function (pageId) { |
| 101 | unstickTree(); | 101 | unstickTree(); |
| 102 | } | 102 | } |
| 103 | } | 103 | } |
| 104 | + // The event ran when the window scrolls | ||
| 105 | + function windowScrollEvent() { | ||
| 106 | + checkTreeStickiness(false); | ||
| 107 | + } | ||
| 108 | + | ||
| 104 | // If the page is scrollable and the window is wide enough listen to scroll events | 109 | // If the page is scrollable and the window is wide enough listen to scroll events |
| 105 | // and evaluate tree stickiness. | 110 | // and evaluate tree stickiness. |
| 106 | if (pageScrollable && $window.width() > 1000) { | 111 | if (pageScrollable && $window.width() > 1000) { |
| 107 | - $window.scroll(function() { | 112 | + $window.on('scroll', windowScrollEvent); |
| 108 | - checkTreeStickiness(false); | 113 | + checkTreeStickiness(true); |
| 109 | - }); | 114 | + } |
| 115 | + | ||
| 116 | + // Handle window resizing and switch between desktop/mobile views | ||
| 117 | + $window.on('resize', event => { | ||
| 118 | + if (pageScrollable && $window.width() > 1000) { | ||
| 119 | + $window.on('scroll', windowScrollEvent); | ||
| 110 | checkTreeStickiness(true); | 120 | checkTreeStickiness(true); |
| 121 | + } else { | ||
| 122 | + $window.off('scroll', windowScrollEvent); | ||
| 123 | + unstickTree(); | ||
| 111 | } | 124 | } |
| 125 | + }); | ||
| 112 | 126 | ||
| 113 | }; | 127 | }; | ... | ... |
-
Please register or sign in to post a comment