Question

我在向下滚动到侧边栏时尝试制作侧边栏（或固定）。当我向上滚动时，它会回到它相对的位置。

我使用一个名为（Breakpoint）的插件用于“破解”脚本，因为我的CSS媒体查询将侧边栏更改为常规堆叠块（适用于移动用户）。

我的问题是如何逃避它（使用Exit）？我尝试这样做的方式似乎无法正常工作。

        $(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);

如何使用Breakpoint.js（来自链接）

的示例

 $.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 [浓缩]

<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}
}

Answer 1

请参阅我对脚本所做的编辑。基本上，我需要使用FireBug来实现我需要首先调用var，然后停止它们。该脚本本身会创建一个不会破坏容器的动画FIXED侧边栏。我的宽度是一个百分比，所以我使用的剧本一石二鸟！

如果这对任何人都有帮助，那就太棒了！

以下是代码，在单独的JS文件和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");
        });
    }
});

}）;

Answer 2

我使用过jquery插件

https://github.com/garand/sticky

停在底部：

（function（$）{

var limit_bottom=$('#footer').height(); 
$('.product-box').sticky({topSpacing:0, bottomSpacing:limit_bottom});

}）（jQuery的）;

使用jQuery Breakpoint停止Sticky Div脚本

2 个答案: