Sticky meta tabs (TOC etc.)

This commit is contained in:
Anna Dabrowska 2020-01-21 13:29:38 +01:00
parent 7d0d2234e5
commit a0b1eecca4
2 changed files with 31 additions and 2 deletions

View file

@ -25,13 +25,24 @@
top: .2rem;
right: auto;
float: none;
display: block;
max-width: 100%;
min-height: @page-header_height;
height: auto;
border: 0 none;
}
&.sticky {
position: fixed;
top: 0;
ul.meta-tabs > li > a {
border-top-color: @ini_background_site;
border-bottom-color: @noopentasks-border;
border-radius: 0 0 @ini_default_border_radius @ini_default_border_radius;
}
}
+ .msg-area + a {
clear: right;
margin-top: 20px;
@ -113,6 +124,7 @@
}
@media @screen_max-md {
background-color: @ini_background;
top: 0;
border: 1px solid @ini_existing;
color: @ini_existing;
@ -199,7 +211,8 @@
&.active {
display: block;
overflow: hidden;
max-height: 80vh;
overflow: auto;
}
a {

View file

@ -64,11 +64,27 @@
};
var stickyBox = function ($metaBox, topOffset, leftOffset) {
if (window.pageYOffset >= topOffset) {
$metaBox.addClass("sticky").attr("style", "left: " + leftOffset + "px");
} else {
$metaBox.removeClass("sticky").removeAttr("style");
}
};
$(function(){
var $metaBox = $('#spr__meta-box');
if (!$metaBox.length) return;
registerClickForTabsInMetaBox($metaBox);
var topOffset = $metaBox.offset().top;
window.onscroll = function () {
// check while scrolling, or window resizing will break horizontal positioning
var leftOffset = $metaBox.offset().left;
stickyBox($metaBox, topOffset, leftOffset)
};
});