.switchClass() animating undeclared properties
I'm using waypoints.js to trigger a sticky sidebar and disable it once a specific div scrolls into view. From my CSS below, you'll see it only switches the bottom, position, and top properties. If I use .removeClass()/.addClass() the positioning is correct, but nothing seems to get animated and there's a jerky jump when the positioning changes. If I use .switchClass(), instead of just a jerky jump, the sticky sidebar moves diagonally away from its container and reappears in position, and the animation changes the left, right, and z-index style properties.
Here's my CSS:
- .sidebar {
- position: relative;
- }
- .sidebar-stuck {
- bottom: auto;
- position: fixed;
- top: 65px;
- }
- .sidebar-unstuck {
- bottom: 22px;
- position: absolute;
- top: auto;
- }
Here's my JS:
- var unstickSidebar = new Waypoint.Inview({
- element: $('section.related')[0],
- enter: function(direction) {
- if (direction === 'down') {
- $('.sidebar-sticky').switchClass('sidebar-stuck','sidebar-unstuck');
- }
- },
- exited: function(direction) {
- if (direction === 'up') {
- $('.sidebar-sticky').switchClass('sidebar-unstuck','sidebar-stuck');
- }
- }
- });
Is there a way to prevent .switchClass() from altering properties that aren't in use by my classes, or at least, can you think of a better way to do what I'm trying to do, so that my sidebar stays where it's supposed to?