We’ve implemented the Walker Nav Menu, and have nice dropdown submenus on our site.
However, when a user scrolls down the page, the dropdown submenu disappears.
I’ve noticed the div with a class of dropdown-menu
also has this attribute:
x-placement="bottom-start"
…and when the menu disappears on scrolling, the attribute changed to:
x-placement="top-start"
.
Similarly, the style
attribute of the same div changes from:
position: absolute; transform: translate3d(0px, 60px, 0px); top: 0px; left: 0px; will-change: transform;
(60px
being the height of the menu), to:
position: absolute; transform: translate3d(0px, -257px, 0px); top: 0px; left: 0px; will-change: transform;
…upon scroll (the -257
updates to however far down the page the user has scrolled).
I know an obvious/hacky solution is to have a jQuery event to listen for a certain scrollTop position and then manually modify these attributes so that the dropdown always has x-placement="bottom-start"
and position: absolute; transform: translate3d(0px, 60px, 0px); top: 0px; left: 0px; will-change: transform;
, but I was wondering if there’s a more ‘correct’ way of solving this, for example interacting with the Bootstrap Dropdown Javascript class, or even PopperJS?
I printed the contents of window
to the console, and couldn’t find anything Bootstrap-related to interact with.
Any pointers on this would be great!
Cheers,
Lloyd