sticky content


Topic: sticky content

arogonov pro asked 3 months 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.


Bartłomiej Malanowski staff pro premium answered 3 months 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


arogonov pro answered 3 months 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 pro premium commented 3 months 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


arogonov pro answered 3 weeks 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


Marta Szymanska staff answered 3 weeks 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 3 weeks ago

I did. Does not work :(


Marta Szymanska staff answered 3 weeks ago

Hi,

please send me your file or project to m.szymanska@mdbootstrap.com. I will check this and replay you.

Best, Marta


reza pro answered a week ago

Hi use Sticky and not work mdb 4.8.4 pro version please help me


Marta Szymanska staff commented a week 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 a week 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!


reza pro answered a week 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 a day ago

Please Help Me, sticky notworking


Bartłomiej Malanowski staff pro premium commented a day ago

@reza could you please show us your site where this issue would be visible?


reza pro answered 9 hours 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


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.7.5
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: Yes