Problem with resizing and displaying/hide-show/toggling
rnjnsn opened this issue · comments
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?