Sticky meta tabs (TOC etc.)
This commit is contained in:
parent
7d0d2234e5
commit
a0b1eecca4
2 changed files with 31 additions and 2 deletions
|
@ -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 {
|
||||
|
|
|
@ -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)
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue