Topic: MDB jQuery Sticky weird behaviour
Hi all, a little problem here with the sticky-class.
*Actual behavior*The whole column disappears and is actually located above and outside the viewport because for some weird reason, bottom: 0 is being injected in the HTML
Resources (screenshots, code snippets etc.) When not activated:
<div id="sidebar" class="col-md-3 my-5 pr-5 sticky" style="position: static; width: 284.25px; height: 190px; z-index: 2; bottom: 0px; top: 0px;"> <img class="img-fluid rounded-circle z-depth-2" src="/img/24DegreesTransparent.png" alt="alternate description"> </div>
<div id="sidebar" class="col-md-3 my-5 pr-5 sticky" style="position: absolute; width: 284.25px; height: 150px; z-index: 2; bottom: 0px;"> <img class="img-fluid rounded-circle z-depth-2" src="/img/24DegreesTransparent.png" alt="alternate description"> </div>
So I noticed the top:0 is removed when activated, but the bottom:0 is still there.
Weird. All help welcome, I don't get it.
I tried your code but it didn't work. I'll look into it later, I'm starting to think that some of my SCSS is causing this behaviour. I'll keep you posted and thanks for the help !!
Yes, I've got your email. Please try to change your HTML. Please remove the
.sticky class from to
#sidebar and add it again like this:
<div id="sidebar" class="col-md-3 mb-5 pr-5 mx-auto"> <div class="sticky"> <!-- The content of your sidebar --> </div> </div>
@Bartlomeij: I have send you a link to the documents, did you receive it?
Sorry, forgot to mention: if I manually remove the bottom:0 when activated, then it's visible again. Until I scroll of course, then it is gone because bottom:0 is added again.
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.7.5
- Device: iMac
- Browser: Chrome
- OS: OsX
- Provided sample code: No
- Provided link: No