abouolia / sticky-sidebar

😎 Pure JavaScript tool for making smart and high performance sticky sidebar.
https://abouolia.github.io/sticky-sidebar/
MIT License
2.23k stars 487 forks source link

Problem with resizing and displaying/hide-show/toggling #109

Closed rnjnsn closed 4 years ago

rnjnsn commented 4 years ago

I have a problem with resizing and displaying/hiding-showing/toggling sticky-sidebar.

I've done a whole lot of troubleshooting and think I've narrowed the problem down to sticky-sidebar.

I have a sticky-sidebar (sb1) that I want to show whenever screen width is > 1024 and another non-sticky sidebar that I want to show when the screen width is < 1024 (sb2). I can get sb1 to hide and s2 to show when screen-width is < 1024. However, once I resize the window again, so that it is > 1024, the sticky-sidebar sb1 doesn't show. SB2, with which I also use the script below but which isn't a sticky-sidebar, there is no problem.

I've tried to use media queries


@media only screen and (max-width: 1024px) {

  .sticky-sidebar-demo {
    display: hide;
}

Now I am using the script


    $(function() {
        $(window).resize(function() {
            if(window.innerWidth > 1024){
                $('#sticky-sidebar-demo').show();
            }else{
                $('#sticky-sidebar-demo').hide();
            }
        }).resize();
    });

but neither works. After resizing back to > 1024, sticky-sidebar disappears. Curiously, if I am in inspect-mode, sticky-sidebar always shows - even in > 1024.

Here's my sidebar CSS:

#sticky-sidebar-demo {
  float: left;
  max-width: 200px;
  will-change: min-height;
}

#sticky-sidebar-demo .sidebar__inner{
  position: relative;
  transform: translate(0, 0);
  transform: translate3d(0, 0, 0);
  will-change: position, transform;
}

.inner-wrapper-sticky {
  overflow: hidden;
}

Here sticky-sidebar config w/ ResizeSensor.js:

<script type="text/javascript" src="{% static 'js/ResizeSensor.js' %}"></script>

<script type="text/javascript" src="{% static 'js/jquery.sticky-sidebar.min.js' %}"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#sticky-sidebar-demo').stickySidebar({
            containerSelector: '.container',
            innerWrapperClass: '.sidebar__inner',
            topSpacing: 234,
            stickyClass: 'is-affixed',
            resizeSensor: true,
        });
    });
</script>

Any ideas?