Merge "Accommodate other sticky elements with sticky header"
This commit is contained in:
commit
17ccb9ab3a
|
@ -7,7 +7,8 @@ var
|
|||
FIRST_HEADING_ID = 'firstHeading',
|
||||
USER_MENU_ID = 'p-personal',
|
||||
VECTOR_USER_LINKS_SELECTOR = '.vector-user-links',
|
||||
SEARCH_TOGGLE_SELECTOR = '.vector-sticky-header-search-toggle';
|
||||
SEARCH_TOGGLE_SELECTOR = '.vector-sticky-header-search-toggle',
|
||||
OTHER_STICKY_ELEMENT_SELECTORS = '.charts-stickyhead th';
|
||||
|
||||
/**
|
||||
* Copies attribute from an element to another.
|
||||
|
@ -134,6 +135,13 @@ function makeStickyHeaderFunctional(
|
|||
document.querySelector( '#ca-history a' ),
|
||||
document.querySelector( '#ca-talk a' )
|
||||
);
|
||||
|
||||
// Apply offset for other sticky elements on page if applicable.
|
||||
var otherStickyElements = document.querySelectorAll( OTHER_STICKY_ELEMENT_SELECTORS );
|
||||
Array.prototype.forEach.call( otherStickyElements, function ( el ) {
|
||||
el.classList.add( 'mw-sticky-header-element' );
|
||||
} );
|
||||
|
||||
stickyObserver.observe( stickyIntersection );
|
||||
}
|
||||
|
||||
|
|
|
@ -3,8 +3,10 @@
|
|||
|
||||
// Set an explicit height. This is needed for scroll padding and for other
|
||||
// sticky elements on the page. Setting the height in relative units enables
|
||||
// the header's height to adapt to the browser's font size setting.
|
||||
@height-sticky-header: unit( 60px / @font-size-browser, em );
|
||||
// the header's height to adapt to the browser's font size setting. Because
|
||||
// this variable is used to determine top offsets for sticky elements where the
|
||||
// font-size might not be 16px, using rem avoids the cascading effects of em units.
|
||||
@height-sticky-header: unit( 60px / @font-size-browser, rem );
|
||||
|
||||
.vector-sticky-header {
|
||||
width: 100%;
|
||||
|
@ -129,18 +131,25 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
// T290518: When the sticky header is enabled (feature flag is on, js is
|
||||
// enabled, and viewport is at higher resolutions), add scroll padding to the
|
||||
// root element. This is needed so that the sticky header does not overlap the
|
||||
// top of an element when the URI has a hash fragment (e.g. when the user clicks
|
||||
// a jump link) and when the user tabs through elements in reverse order.
|
||||
//
|
||||
// Please note that this class must be independent of the
|
||||
// .vector-sticky-header-visible class to correctly handle situations where the
|
||||
// sticky header isn't visible yet but we still need scroll padding applied
|
||||
// (e.g. when the user navigates to a page with a hash fragment in the URI).
|
||||
@media ( min-width: @width-breakpoint-tablet ) {
|
||||
.client-js.vector-sticky-header-enabled {
|
||||
// T290518: When the sticky header is enabled (feature flag is on, js is
|
||||
// enabled, and viewport is at higher resolutions), add scroll padding to the
|
||||
// root element. This is needed so that the sticky header does not overlap the
|
||||
// top of an element when the URI has a hash fragment (e.g. when the user clicks
|
||||
// a jump link) and when the user tabs through elements in reverse order.
|
||||
//
|
||||
// Please note that this class must be independent of the
|
||||
// .vector-sticky-header-visible class to correctly handle situations where the
|
||||
// sticky header isn't visible yet but we still need scroll padding applied
|
||||
// (e.g. when the user navigates to a page with a hash fragment in the URI).
|
||||
scroll-padding-top: @height-sticky-header;
|
||||
|
||||
// T289817 Override other sticky element offsets to ensure that other
|
||||
// sticky elements (i.e. table headers) appear below the sticky header.
|
||||
.mw-sticky-header-element {
|
||||
/* stylelint-disable-next-line declaration-no-important */
|
||||
top: @height-sticky-header !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue