Skip to content

Commit 0393906

Browse files
authored
fix(toc): adjust mobile selector, should always be navbar (#11589)
### Related Ticket(s) Closes #11587 ### Description Fixes sticky behavior issue with TOC Dotcom shell at less than lg breakpoint. ### Testing instructions 1. Open the Dotcom shell > Default 2. Scroll the page 3. The Masthead should be sticky until it reaches the TOC, then the masthead should scroll away, while the TOC becomes sticky to the top. 4. Repeat at both `lg` and less than `lg` breakpoints 5. Repeat 1-4 with the Dotcom shell > With ToC horizontal story ### Changelog **Changed** - TOC dotcom shell sticky behavior fixed at less than lg breakpoint <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) -->
1 parent 2b0feba commit 0393906

File tree

1 file changed

+6
-10
lines changed

1 file changed

+6
-10
lines changed

packages/utilities/src/utilities/StickyHeader/StickyHeader.js

+6-10
Original file line numberDiff line numberDiff line change
@@ -74,21 +74,17 @@ class StickyHeader {
7474

7575
const tocRoot = toc.shadowRoot;
7676

77-
const desktopSelector = `.${c4dPrefix}-ce--table-of-contents__items-container`;
78-
77+
this._tableOfContentsInnerBar = tocRoot.querySelector(
78+
`.${prefix}--tableofcontents__navbar`
79+
);
7980
if (window.innerWidth > gridBreakpoint) {
8081
if (toc.layout === 'horizontal') {
81-
this._tableOfContentsInnerBar = tocRoot.querySelector(
82-
`.${prefix}--tableofcontents__navbar`
83-
);
8482
this._tableOfContentsLayout = 'horizontal';
8583
} else {
86-
this._tableOfContentsInnerBar = tocRoot.querySelector(desktopSelector);
84+
this._tableOfContentsInnerBar = tocRoot.querySelector(
85+
`.${c4dPrefix}-ce--table-of-contents__items-container`
86+
);
8787
}
88-
} else {
89-
this._tableOfContentsInnerBar = tocRoot.querySelector(
90-
`.${prefix}--tableofcontents__sidebar`
91-
);
9288
}
9389
}
9490

0 commit comments

Comments
 (0)