Topic: sticky content
arogonov pro asked 5 years ago
Hi.
https://mdbootstrap.com/docs/jquery/javascript/sticky/ I remember that earlier there were good examples on this page.
Now a) Little information and examples b) Even existing examples cannot be opened in MDB Editor. For example, such a Snippet is done by clicking "Open MDB Editor" in the first example. https://mdbootstrap.com/snippets/jquery/arogonov/582440 Very useful!
Aleksandr.
Marta Wierzbicka staff answered 5 years ago
Hi,
this is your above code and It's working: https://mdbootstrap.com/snippets/jquery/marta-szymanska/940113?view=project#js-tab-view.
Bartłomiej asked you about "showing us your site where this issue would be visible". Because your above code works and we don't see the problem and we don't know how to help you.
Best, Marta
reza pro commented 5 years ago
Hi,
this warning is show:
This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!
Sometimes it works and sometimes not
reza pro commented 5 years ago
@Marta Szymanska
I need this library
can u help me?
Marta Wierzbicka staff commented 5 years ago
Hi,
for now, we don't have a quick solution for this and we will try to fix this in the future.
Best, Marta
reza pro answered 5 years ago
Sticky Content - basic demo
<div class="container-fluid mt-3">
<div class="row">
<div class="col-4">
<div class="example-static text-center mb-2">
This is a <strong>static</strong> element
</div>
<div class="sticky-content text-center info-color text-white">
This is a <strong>sticky</strong> element
</div><div class="sticky-placeholder" style="width: 321.067px; height: 24px;"></div>
</div>
<div class="col-8">
<div class="example-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto in inventore at labore sed libero nulla, accusamus quo asperiores fugiat aspernatur rem blanditiis perspiciatis autem voluptatem molestiae magnam, dolore aliquid.</p>
<p>Minima deleniti optio aut dicta deserunt sint commodi vel eum dolor maiores eveniet reprehenderit porro explicabo quaerat nam, quidem distinctio ipsum molestias, quo autem voluptatum ab animi, ad. Expedita, labore.</p>
<p>Non nam molestias officiis temporibus optio voluptatum aliquam. Blanditiis qui ut error amet nemo sequi rem commodi perferendis officia, asperiores ipsa repellat vitae ipsum eveniet distinctio debitis est aperiam molestiae.</p>
<p>Aliquid itaque libero adipisci, voluptates non repudiandae aspernatur obcaecati quod quia consequuntur labore sed doloribus illum quae similique beatae sint eveniet quaerat saepe cumque et eos. Voluptas odio, recusandae suscipit.</p>
<p>Eius repudiandae magni ut consequatur adipisci quasi, harum autem molestias itaque facilis voluptatum natus et eligendi obcaecati deserunt deleniti pariatur quos magnam cumque, minima iusto. Ipsam cum nobis esse enim!</p>
<p>Minima deleniti optio aut dicta deserunt sint commodi vel eum dolor maiores eveniet reprehenderit porro explicabo quaerat nam, quidem distinctio ipsum molestias, quo autem voluptatum ab animi, ad. Expedita, labore.</p>
<p>Non nam molestias officiis temporibus optio voluptatum aliquam. Blanditiis qui ut error amet nemo sequi rem commodi perferendis officia, asperiores ipsa repellat vitae ipsum eveniet distinctio debitis est aperiam molestiae.</p>
<p>Aliquid itaque libero adipisci, voluptates non repudiandae aspernatur obcaecati quod quia consequuntur labore sed doloribus illum quae similique beatae sint eveniet quaerat saepe cumque et eos. Voluptas odio, recusandae suscipit.</p>
<p>Eius repudiandae magni ut consequatur adipisci quasi, harum autem molestias itaque facilis voluptatum natus et eligendi obcaecati deserunt deleniti pariatur quos magnam cumque, minima iusto. Ipsam cum nobis esse enim!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto in inventore at labore sed libero nulla, accusamus quo asperiores fugiat aspernatur rem blanditiis perspiciatis autem voluptatem molestiae magnam, dolore aliquid.</p>
<p>Minima deleniti optio aut dicta deserunt sint commodi vel eum dolor maiores eveniet reprehenderit porro explicabo quaerat nam, quidem distinctio ipsum molestias, quo autem voluptatum ab animi, ad. Expedita, labore.</p>
<p>Non nam molestias officiis temporibus optio voluptatum aliquam. Blanditiis qui ut error amet nemo sequi rem commodi perferendis officia, asperiores ipsa repellat vitae ipsum eveniet distinctio debitis est aperiam molestiae.</p>
<p>Aliquid itaque libero adipisci, voluptates non repudiandae aspernatur obcaecati quod quia consequuntur labore sed doloribus illum quae similique beatae sint eveniet quaerat saepe cumque et eos. Voluptas odio, recusandae suscipit.</p>
<p>Eius repudiandae magni ut consequatur adipisci quasi, harum autem molestias itaque facilis voluptatum natus et eligendi obcaecati deserunt deleniti pariatur quos magnam cumque, minima iusto. Ipsam cum nobis esse enim!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto in inventore at labore sed libero nulla, accusamus quo asperiores fugiat aspernatur rem blanditiis perspiciatis autem voluptatem molestiae magnam, dolore aliquid.</p>
<p>Minima deleniti optio aut dicta deserunt sint commodi vel eum dolor maiores eveniet reprehenderit porro explicabo quaerat nam, quidem distinctio ipsum molestias, quo autem voluptatum ab animi, ad. Expedita, labore.</p>
<p>Non nam molestias officiis temporibus optio voluptatum aliquam. Blanditiis qui ut error amet nemo sequi rem commodi perferendis officia, asperiores ipsa repellat vitae ipsum eveniet distinctio debitis est aperiam molestiae.</p>
<p>Aliquid itaque libero adipisci, voluptates non repudiandae aspernatur obcaecati quod quia consequuntur labore sed doloribus illum quae similique beatae sint eveniet quaerat saepe cumque et eos. Voluptas odio, recusandae suscipit.</p>
<p>Eius repudiandae magni ut consequatur adipisci quasi, harum autem molestias itaque facilis voluptatum natus et eligendi obcaecati deserunt deleniti pariatur quos magnam cumque, minima iusto. Ipsam cum nobis esse enim!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto in inventore at labore sed libero nulla, accusamus quo asperiores fugiat aspernatur rem blanditiis perspiciatis autem voluptatem molestiae magnam, dolore aliquid.</p>
<p>Minima deleniti optio aut dicta deserunt sint commodi vel eum dolor maiores eveniet reprehenderit porro explicabo quaerat nam, quidem distinctio ipsum molestias, quo autem voluptatum ab animi, ad. Expedita, labore.</p>
<p>Non nam molestias officiis temporibus optio voluptatum aliquam. Blanditiis qui ut error amet nemo sequi rem commodi perferendis officia, asperiores ipsa repellat vitae ipsum eveniet distinctio debitis est aperiam molestiae.</p>
<p>Aliquid itaque libero adipisci, voluptates non repudiandae aspernatur obcaecati quod quia consequuntur labore sed doloribus illum quae similique beatae sint eveniet quaerat saepe cumque et eos. Voluptas odio, recusandae suscipit.</p>
<p>Eius repudiandae magni ut consequatur adipisci quasi, harum autem molestias itaque facilis voluptatum natus et eligendi obcaecati deserunt deleniti pariatur quos magnam cumque, minima iusto. Ipsam cum nobis esse enim!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto in inventore at labore sed libero nulla, accusamus quo asperiores fugiat aspernatur rem blanditiis perspiciatis autem voluptatem molestiae magnam, dolore aliquid.</p>
<p>Minima deleniti optio aut dicta deserunt sint commodi vel eum dolor maiores eveniet reprehenderit porro explicabo quaerat nam, quidem distinctio ipsum molestias, quo autem voluptatum ab animi, ad. Expedita, labore.</p>
<p>Non nam molestias officiis temporibus optio voluptatum aliquam. Blanditiis qui ut error amet nemo sequi rem commodi perferendis officia, asperiores ipsa repellat vitae ipsum eveniet distinctio debitis est aperiam molestiae.</p>
<p>Aliquid itaque libero adipisci, voluptates non repudiandae aspernatur obcaecati quod quia consequuntur labore sed doloribus illum quae similique beatae sint eveniet quaerat saepe cumque et eos. Voluptas odio, recusandae suscipit.</p>
<p>Eius repudiandae magni ut consequatur adipisci quasi, harum autem molestias itaque facilis voluptatum natus et eligendi obcaecati deserunt deleniti pariatur quos magnam cumque, minima iusto. Ipsam cum nobis esse enim!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto in inventore at labore sed libero nulla, accusamus quo asperiores fugiat aspernatur rem blanditiis perspiciatis autem voluptatem molestiae magnam, dolore aliquid.</p>
<p>Minima deleniti optio aut dicta deserunt sint commodi vel eum dolor maiores eveniet reprehenderit porro explicabo quaerat nam, quidem distinctio ipsum molestias, quo autem voluptatum ab animi, ad. Expedita, labore.</p>
<p>Non nam molestias officiis temporibus optio voluptatum aliquam. Blanditiis qui ut error amet nemo sequi rem commodi perferendis officia, asperiores ipsa repellat vitae ipsum eveniet distinctio debitis est aperiam molestiae.</p>
<p>Aliquid itaque libero adipisci, voluptates non repudiandae aspernatur obcaecati quod quia consequuntur labore sed doloribus illum quae similique beatae sint eveniet quaerat saepe cumque et eos. Voluptas odio, recusandae suscipit.</p>
<p>Eius repudiandae magni ut consequatur adipisci quasi, harum autem molestias itaque facilis voluptatum natus et eligendi obcaecati deserunt deleniti pariatur quos magnam cumque, minima iusto. Ipsam cum nobis esse enim!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto in inventore at labore sed libero nulla, accusamus quo asperiores fugiat aspernatur rem blanditiis perspiciatis autem voluptatem molestiae magnam, dolore aliquid.</p>
<p>Minima deleniti optio aut dicta deserunt sint commodi vel eum dolor maiores eveniet reprehenderit porro explicabo quaerat nam, quidem distinctio ipsum molestias, quo autem voluptatum ab animi, ad. Expedita, labore.</p>
<p>Non nam molestias officiis temporibus optio voluptatum aliquam. Blanditiis qui ut error amet nemo sequi rem commodi perferendis officia, asperiores ipsa repellat vitae ipsum eveniet distinctio debitis est aperiam molestiae.</p>
<p>Aliquid itaque libero adipisci, voluptates non repudiandae aspernatur obcaecati quod quia consequuntur labore sed doloribus illum quae similique beatae sint eveniet quaerat saepe cumque et eos. Voluptas odio, recusandae suscipit.</p>
<p>Eius repudiandae magni ut consequatur adipisci quasi, harum autem molestias itaque facilis voluptatum natus et eligendi obcaecati deserunt deleniti pariatur quos magnam cumque, minima iusto. Ipsam cum nobis esse enim!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto in inventore at labore sed libero nulla, accusamus quo asperiores fugiat aspernatur rem blanditiis perspiciatis autem voluptatem molestiae magnam, dolore aliquid.</p>
<p>Minima deleniti optio aut dicta deserunt sint commodi vel eum dolor maiores eveniet reprehenderit porro explicabo quaerat nam, quidem distinctio ipsum molestias, quo autem voluptatum ab animi, ad. Expedita, labore.</p>
<p>Non nam molestias officiis temporibus optio voluptatum aliquam. Blanditiis qui ut error amet nemo sequi rem commodi perferendis officia, asperiores ipsa repellat vitae ipsum eveniet distinctio debitis est aperiam molestiae.</p>
<p>Aliquid itaque libero adipisci, voluptates non repudiandae aspernatur obcaecati quod quia consequuntur labore sed doloribus illum quae similique beatae sint eveniet quaerat saepe cumque et eos. Voluptas odio, recusandae suscipit.</p>
<p>Eius repudiandae magni ut consequatur adipisci quasi, harum autem molestias itaque facilis voluptatum natus et eligendi obcaecati deserunt deleniti pariatur quos magnam cumque, minima iusto. Ipsam cum nobis esse enim!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto in inventore at labore sed libero nulla, accusamus quo asperiores fugiat aspernatur rem blanditiis perspiciatis autem voluptatem molestiae magnam, dolore aliquid.</p>
<p>Minima deleniti optio aut dicta deserunt sint commodi vel eum dolor maiores eveniet reprehenderit porro explicabo quaerat nam, quidem distinctio ipsum molestias, quo autem voluptatum ab animi, ad. Expedita, labore.</p>
<p>Non nam molestias officiis temporibus optio voluptatum aliquam. Blanditiis qui ut error amet nemo sequi rem commodi perferendis officia, asperiores ipsa repellat vitae ipsum eveniet distinctio debitis est aperiam molestiae.</p>
<p>Aliquid itaque libero adipisci, voluptates non repudiandae aspernatur obcaecati quod quia consequuntur labore sed doloribus illum quae similique beatae sint eveniet quaerat saepe cumque et eos. Voluptas odio, recusandae suscipit.</p>
<p>Eius repudiandae magni ut consequatur adipisci quasi, harum autem molestias itaque facilis voluptatum natus et eligendi obcaecati deserunt deleniti pariatur quos magnam cumque, minima iusto. Ipsam cum nobis esse enim!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto in inventore at labore sed libero nulla, accusamus quo asperiores fugiat aspernatur rem blanditiis perspiciatis autem voluptatem molestiae magnam, dolore aliquid.</p>
<p>Minima deleniti optio aut dicta deserunt sint commodi vel eum dolor maiores eveniet reprehenderit porro explicabo quaerat nam, quidem distinctio ipsum molestias, quo autem voluptatum ab animi, ad. Expedita, labore.</p>
<p>Non nam molestias officiis temporibus optio voluptatum aliquam. Blanditiis qui ut error amet nemo sequi rem commodi perferendis officia, asperiores ipsa repellat vitae ipsum eveniet distinctio debitis est aperiam molestiae.</p>
<p>Aliquid itaque libero adipisci, voluptates non repudiandae aspernatur obcaecati quod quia consequuntur labore sed doloribus illum quae similique beatae sint eveniet quaerat saepe cumque et eos. Voluptas odio, recusandae suscipit.</p>
<p>Eius repudiandae magni ut consequatur adipisci quasi, harum autem molestias itaque facilis voluptatum natus et eligendi obcaecati deserunt deleniti pariatur quos magnam cumque, minima iusto. Ipsam cum nobis esse enim!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto in inventore at labore sed libero nulla, accusamus quo asperiores fugiat aspernatur rem blanditiis perspiciatis autem voluptatem molestiae magnam, dolore aliquid.</p>
<p>Minima deleniti optio aut dicta deserunt sint commodi vel eum dolor maiores eveniet reprehenderit porro explicabo quaerat nam, quidem distinctio ipsum molestias, quo autem voluptatum ab animi, ad. Expedita, labore.</p>
<p>Non nam molestias officiis temporibus optio voluptatum aliquam. Blanditiis qui ut error amet nemo sequi rem commodi perferendis officia, asperiores ipsa repellat vitae ipsum eveniet distinctio debitis est aperiam molestiae.</p>
<p>Aliquid itaque libero adipisci, voluptates non repudiandae aspernatur obcaecati quod quia consequuntur labore sed doloribus illum quae similique beatae sint eveniet quaerat saepe cumque et eos. Voluptas odio, recusandae suscipit.</p>
<p>Eius repudiandae magni ut consequatur adipisci quasi, harum autem molestias itaque facilis voluptatum natus et eligendi obcaecati deserunt deleniti pariatur quos magnam cumque, minima iusto. Ipsam cum nobis esse enim!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto in inventore at labore sed libero nulla, accusamus quo asperiores fugiat aspernatur rem blanditiis perspiciatis autem voluptatem molestiae magnam, dolore aliquid.</p>
<p>Minima deleniti optio aut dicta deserunt sint commodi vel eum dolor maiores eveniet reprehenderit porro explicabo quaerat nam, quidem distinctio ipsum molestias, quo autem voluptatum ab animi, ad. Expedita, labore.</p>
<p>Non nam molestias officiis temporibus optio voluptatum aliquam. Blanditiis qui ut error amet nemo sequi rem commodi perferendis officia, asperiores ipsa repellat vitae ipsum eveniet distinctio debitis est aperiam molestiae.</p>
<p>Aliquid itaque libero adipisci, voluptates non repudiandae aspernatur obcaecati quod quia consequuntur labore sed doloribus illum quae similique beatae sint eveniet quaerat saepe cumque et eos. Voluptas odio, recusandae suscipit.</p>
<p>Eius repudiandae magni ut consequatur adipisci quasi, harum autem molestias itaque facilis voluptatum natus et eligendi obcaecati deserunt deleniti pariatur quos magnam cumque, minima iusto. Ipsam cum nobis esse enim!</p>
</div>
</div>
</div>
</div>
<footer id="footer" class="grey lighten-4">
<p class="stopper-text">Stop here</p>
</footer>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<script type="text/javascript">
$(function () {
$(".sticky-content").sticky({
topSpacing: 50,
zIndex: 2,
stopper: "#footer",
});
});
</script>
@Bartłomiej Malanowski
reza pro answered 5 years ago
<div id="js-sticky" class="sticky-content"><h1>sticky" <h1></div>
$(function() {
$('#js-sticky').sticky({ topSpacing: 90, zIndex: 2, stopper: '#js-footer' });
})
reza pro commented 5 years ago
Please Help Me, sticky notworking
Bartłomiej Malanowski staff commented 5 years ago
@reza could you please show us your site where this issue would be visible?
reza pro answered 5 years ago
Hi use Sticky and not work mdb 4.8.4 pro version please help me
Marta Wierzbicka staff commented 5 years ago
Hi,
would you show us an example of your code to allow us to see this code and try to help you?
Best, Marta
reza pro commented 5 years ago
This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!
Marta Wierzbicka staff answered 5 years ago
Hi,
please send me your file or project to m.szymanska@mdbootstrap.com. I will check this and replay you.
Best, Marta
Marta Wierzbicka staff answered 5 years ago
Hi,
please add all your javascript files on the bottom of the page, above the closing tag. In this direction:
js/jquery-3.4.1.min.js js/popper.min.js js/bootstrap.min.js js/mdb.min.js
Best, Marta
arogonov pro answered 5 years ago
Hey. Copied to your first example. Why does not it work? what am I doing wrong? I do not understand. Thank!
https://iquiqui.com/stickytest.html
arogonov pro answered 5 years ago
I remember that earlier on this page there was a link to a separate page, such or something similar (this one I just found through Google).
https://mdbootstrap.com/previews/docs/latest/html/sticky-content/sticky-content.html This crookedly works. But something similar that worked well for sure.
Bartłomiej Malanowski staff commented 5 years ago
Yes, I remember that one and this was replaced with the smaller previews. I've just added a task to restore the page like this to our documentation
Bartłomiej Malanowski staff answered 5 years ago
Hi, Aragonov!
Thank you for letting us know. Recently, we didn't change anything in our docs for the Sticky, but we'll improve it in the future as we want to keep it neat and understandable to other people
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.7.5
- Device: Any
- Browser: Any
- OS: Any
- Provided sample code: No
- Provided link: Yes