Jen Jen - 1 month ago 6
HTML Question

Stop a Sticky Div Script using jQuery Breakpoint

I am attempting to make a sidebar div stick (or become fixed) after scrolling down to it. When I scroll back up, it goes back to its position being relative.

I use a plugin called (Breakpoint) which use to "break" the script, because my CSS media queries change the sidebar to a regular stacking block (for mobile users).

My question is is how do I escape it (using Exit)? The way in which I attempted to do it doesn't appear to work correctly.

$(document).ready(function() {
$.breakpoint({
condition: function() {
return window.matchMedia("only screen and (min-width:63.75em)").matches;
},
enter: function() {
$(function() {
var $sidebar = $(".sidebar"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
},
exit: function() {
var $sidebar = $(".sidebar"),
$window = $(window);
$window.scroll(function() {
$sidebar.stop().removeAttr("style");
});
}
});
});


Breakpoint.js:

/* jQuery Breakpoint [github.com/martinmartinmartin/breakpoint] */
(function(e){"use strict";function n(e){if(!e.condition()){if(typeof e.exit=="function")try{e.exit()}catch(t){}e.is_active=!1}}function r(e){if(e.condition()){if(typeof e.first_enter=="function"){try{e.first_enter()}catch(t){}delete e.first_enter}if(typeof e.enter=="function")try{e.enter()}catch(t){}e.is_active=!0}}function i(e){e.is_active?n(e):r(e)}function s(){var i=e.grep(t,function(e){return e.is_active}),s=e.grep(t,function(e){return!e.is_active});e.each(i,function(e,t){n(t)});e.each(s,function(e,t){r(t)})}var t=[];e.breakpoint=function(n,r){r=e.extend(!0,{},e.breakpoint.defaults,r);t.push(n);t.length===1&&e(window).on("resize orientationchange",function(){s()});i(n)};e.breakpoint.breakpoints=t;e.breakpoint.defaults={}})(jQuery);


Example of how to use Breakpoint.js (from the link)

$.breakpoint({
condition: function () {
return window.matchMedia('only screen and (min-width:500px)').matches;
},
first_enter: function () {
// Code will run the first time condition() is true.
// Here, you might create elements to use in
// your enter and exit methods.
},
enter: function () {
// Code will run whenever condition() becomes true.
},
exit: function () {
// Code will run whenever condition() becomes false
// (if it was previously true).
// This is where you revert the things you do in the
// enter method.
}
});


HTML [condensed]

<fieldset>
<form>
<div class="options"></div>
<div class="sidebar"></div>
</form>
</fieldset>


CSS

fieldset{background:#fff;border:1px solid #ccc;border-radius:.25em;margin:0;overflow:hidden;padding:1em;width:100%}
.options{margin-right:3%;width:74.25%}
.options,.sidebar{display:inline-block;vertical-align:top}
.sidebar{background:rgba(0,0,0,0.025);border:1px solid #ccc;border-radius:.25em;font-size:.75em;padding:.375em;width:22.75%}
@media screen and (max-width: 63.75em) {
#content .options ul{margin:0}
.options,.sidebar{display:block;width:100%}
.sidebar{font-size:1em;margin-top:1em;position:relative}
}

Jen Jen
Answer

See the edit I made to the script. Basically, I needed to use FireBug to realize I needed to call out the var first, then stop them. The script itself creates an animated FIXED sidebar that doesn't break a container. Mine had a width that was a percentage, so the script I used nailed two birds with one stone!

If this helps anyone, GREAT!

Here is the code again, used in a separate JS file and with jQuery Breakpoint:

$(document).ready(function() {
$.breakpoint({
    condition: function() {
        return window.matchMedia("only screen and (min-width:63.75em)").matches;
    },
    enter: function() {
        $(function() {
            var $sidebar = $(".sidebar"),
                $window = $(window),
                offset = $sidebar.offset(),
                topPadding = 15;
            $window.scroll(function() {
                    if ($window.scrollTop() > offset.top) {
                        $sidebar.stop().animate({
                            marginTop: $window.scrollTop() - offset.top + topPadding
                        });
                    } else {
                        $sidebar.stop().animate({
                            marginTop: 0
                        });
                    }
                });
        });
    },
    exit: function() {
        var $sidebar = $(".sidebar"),
        $window = $(window);
        $window.scroll(function() {
        $sidebar.stop().removeAttr("style");
        });
    }
});

});

Comments