arogonov pro asked 3 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 3 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 3 years ago

Hi,

http://mdb.foolad.com/

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 3 years ago

@Marta Szymanska

I need this library

can u help me?


Marta Wierzbicka staff commented 3 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 3 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 3 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 3 years ago

Please Help Me, sticky notworking


Bartłomiej Malanowski staff commented 3 years ago

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


reza pro answered 3 years ago


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


Marta Wierzbicka staff commented 3 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 3 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 3 years ago


Hi,

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

Best, Marta


arogonov pro answered 3 years ago


I did. Does not work :(


Marta Wierzbicka staff answered 3 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 3 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 3 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 3 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



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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: 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
Tags