jquery - Bootstrap 词缀重置附加元素？

Question

我正在尝试实现侧边栏，这是我的代码:

HTML

<section class="mySection">
    <div class="container">
        <div class="row">
            <header class="col-md-12">
                <h3>Heading</h3>
                <p><em>Some text</em></p>
            </header>

            <!--Main Content Container - Make full width on smaller devices-->
            <article class="col-md-9 col-sm-12" role="main">
                <p>Text to enable scrolling</p>
                <p>Text to enable scrolling</p>
                <p>Text to enable scrolling</p>
                <p>Text to enable scrolling</p>
                <p>Text to enable scrolling</p>
                <p>Text to enable scrolling</p>
                <p>Text to enable scrolling</p>
                <p>Text to enable scrolling</p>
                <p>Text to enable scrolling</p>
                <p>Text to enable scrolling</p>
                <p>Text to enable scrolling</p>
                <p>Text to enable scrolling</p>
                <p>Text to enable scrolling</p>
                <p>Text to enable scrolling</p>
                <p>Text to enable scrolling</p>
                <p>Text to enable scrolling</p>
            </article>
            <!--Sidebar - Hide on Small and extra small devices-->
            <aside class="col-md-3 hidden-sm hidden-xs" role="complementary" data-spy="affix">
                <section class="card">
                    <header>
                        <h4 class="card-title">Card title</h4>
                    </header>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </section>
                <section class="card">
                    <header>
                        <h4 class="card-title">Card title</h4>
                    </header>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </section>
            </aside>
        </div>
    </div>
</section>

CSS

aside.affix {
    top: 0;
}

JQuery

var $scrollHeight = $ ( '#main-nav').outerHeight ( true );

$ ( 'aside' ).affix ({
    offset: { top: $scrollHeight }
});

$ ( 'aside' ).one ( 'affix.bs.affix', function (  ) {
    /**Get sidebar's offset position**/
    var $offset = $ ( 'aside' ).offset (  );

    /**Get sidebar's width**/
    var $width = $ ( 'aside' ).outerWidth ( true );

    /**Create an style array for our sidebar**/
    var styles = {
        left : $offset.left,
        width: $width
    };

    /**Set aside/Sidebar's CSS.**/
    $ ( 'aside' ).css ( styles );
});

一切正常，除了当我将页面一直滚动到顶部时，旁边/我的侧边栏从场景中消失。 我该如何解决这个问题？

Bootstrap : http://www.bootply.com/FjJlykT5e5

Answer 1

问题是当词缀元素返回到它的原始状态时，它的位置并没有返回到原来的位置。所需要做的就是处理 Bootstrap 词缀事件 affix-top.bs.affix，它在词缀元素返回到它的原始状态并且类从 .affix 更改之前被触发code> 到偶数处理程序中的 .affix-top 只需删除内联 style 属性。

$ ( 'aside' ).on ( 'affix-top.bs.affix', function ( event ) {
    /**Remove inline style attributes from the element**/
    $ ( this ).removeAttr ( 'style' );
} );