diff --git a/css/area_nav-metabox.less b/css/area_nav-metabox.less index 6d4af22..13146a8 100755 --- a/css/area_nav-metabox.less +++ b/css/area_nav-metabox.less @@ -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 { diff --git a/js/meta-box.js b/js/meta-box.js index c9b99aa..5cd4cb1 100755 --- a/js/meta-box.js +++ b/js/meta-box.js @@ -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) + }; });