【问题标题】:Trying to get bootstrap's affix to work correctly?试图让引导程序的词缀正常工作?
【发布时间】:2014-10-21 03:01:01
【问题描述】:

我正在使用引导程序的词缀在左侧粘贴一个 div 和一个导航 div。但是简单地将类词缀添加到我喜欢坚持的两个 div 并没有做到这一点。 http://jsfiddle.net/wesweatyoushop/rmuq25ak/4/

两个 div 都可以滚动 260 像素,然后应该粘住,但它们是重叠的

$('#total_price').affix({
    offset: {
        top: 260
    }
});

$('#mainNavShop').affix({
    offset: {
        top: 260
    }
});

【问题讨论】:

    标签: jquery css twitter-bootstrap affix


    【解决方案1】:

    不要尝试使用相同的 CSS 设置附加两个元素,只需创建一个附加的父 div。工作小提琴:http://jsfiddle.net/keliix06/1yb1vLrp/

    <div class="container">
        <div class="row">
            <nav id="leftCol" class="col-sm-3 col-md-3 col-lg-3">
                 <h1>Dashboard</h1>
    
                <div class="profile">
                    <img src="http://placehold.it/150x150" alt="" class="img-circle" />
                   </div>
    
                <div class="affix" id="affix_this">
                <div class="alert-success alerts-heading" id="total_price">
                <p class="">&euro; 200</p>
                    </div>
            <ul id="mainNavShop" class="list-group bs-wizard-sidebar" role="menu">
                <li><a href="#overview"><i class="icon-chevron-right"></i> Overview</a>
    
                </li>
                <li><a href="#transitions"><i class="icon-chevron-right"></i> Transitions</a>
    
                </li>
                <li><a href="#modals"><i class="icon-chevron-right"></i> Modal</a>
    
                </li>
                <li><a href="#dropdowns"><i class="icon-chevron-right"></i> Dropdown</a>
    
                </li>
                <li><a href="#scrollspy"><i class="icon-chevron-right"></i> Scrollspy</a>
    
                </li>
                <li><a href="#tabs"><i class="icon-chevron-right"></i> Tab</a>
    
                </li>
                <li><a href="#tooltips"><i class="icon-chevron-right"></i> Tooltip</a>
    
                </li>
                <li><a href="#popovers"><i class="icon-chevron-right"></i> Popover</a>
    
                </li>
                <li><a href="#alerts"><i class="icon-chevron-right"></i> Alert</a>
    
                </li>
                <li><a href="#buttons"><i class="icon-chevron-right"></i> Button</a>
    
                </li>
                <li><a href="#collapse"><i class="icon-chevron-right"></i> Collapse</a>
    
                </li>
                <li><a href="#carousel"><i class="icon-chevron-right"></i> Carousel</a>
    
                </li>
                <li><a href="#typeahead"><i class="icon-chevron-right"></i> Typeahead</a>
    
                </li>
                <li><a href="#affix"><i class="icon-chevron-right"></i> Affix</a>
    
                </li>
            </ul>
    
            </div>
        </nav>
        <section id="content" class="col-sm-9 col-md-9 col-lg-9 top-margin-20">
             <h3>content loop</h3>
    Sit ut wisi fuisset constituto, no quem munere nam. Ignota ornatus necessitatibus eu eos. Cum ut nibh habemus. Cu eos nisl graece, epicurei assentior ne usu, sea omnis prompta partiendo in. Oporteat consequuntur quo ea, ferri alterum pri eu. Ad eum oratio deterruisset, usu an detraxit disputationi. Nobis option ad eam. No vivendum honestatis mei. Aliquam alienum an mea, ad copiosae senserit moderatius nec. Ut sea virtute torquatos conceptam. Populo repudiandae te per. Ut denique consequuntur vel, at sea iisque appareat, te illum melius his. Diam graeco gubergren ex his. Sea in quem efficiantur, his agam sensibus ut, simul efficiantur cu nec. Latine nominati eam ex, unum debet ei eam. Amet doctus nec no, ne ipsum dicit nam. Cibo commodo reprimique sed ex. Sit ei intellegat scribentur, quot eligendi voluptaria vix an. In qui putent antiopam, laoreet admodum et mei. Dico vide oratio in pri, vel simul moderatius efficiantur te. Eam etiam falli ullamcorper ne, eu has cetero antiopam, et errem oportere vix. Nec justo movet recteque ea, ea vel ludus zril, has sumo animal ei. Vim erant gubergren similique ea, pro no ludus oblique. Ne natum tacimates reprehendunt mei, nostro scripta accumsan an eam. At tollit altera moderatius vel. Affert dolore duo at, ius quem pericula mediocritatem ea. Eum ipsum nulla mollis et, mei atqui menandri intellegam eu, qui ad malorum accumsan. Putant deleniti voluptatibus id eam, meis fastidii mnesarchum ea pri, te unum utroque eos. Cu case scriptorem pro. Est malis concludaturque te, an stet indoctum aliquando nec. Dicant tamquam ius et, et mei tantas recteque. Ne volutpat repudiare complectitur vix. Graeco electram omittantur at nec, bonorum dolorem maiorum est ne. Nec porro cetero indoctum ut, minim posidonium disputationi sed ei, iriure constituto his at. Oblique maiorum est ea. Quo habemus vituperata contentiones at, qui convenire imperdiet forensibus ei. Usu ferri disputationi ei, sonet repudiare hendrerit ut mea. Ex omnis utinam sit. Te eam facilis repudiare, vis inani moderatius ea, eu quot dicta sit. Congue facilisis eu sit, intellegam assueverit ei duo, te vix iusto laoreet persecuti. Discere percipit indoctum ei quo, praesent scribentur contentiones no vim, vix dicant nominati maluisset ei. Vim nullam omnesque singulis id, corpora petentium eos an. Cu vis legere animal, in nec ubique erroribus. In graecis intellegat constituto per, at suavitate forensibus conclusionemque mel. Qui in legere viderer posidonium, an sea nibh doming. Sed cu omittantur suscipiantur, no nam expetendis mediocritatem. Oblique aliquam cotidieque qui an, sit vidit solum postulant ad. Labores facilis ancillae ea mel, tale vivendo vis ad. Errem nostrum eum ex, ea est liber blandit, vide audiam ancillae id pro. Sea in saepe partem, quo ferri postea honestatis te. Nec tollit aperiri eu. Sit ut wisi fuisset constituto, no quem munere nam. Ignota ornatus necessitatibus eu eos. Cum ut nibh habemus. Cu eos nisl graece, epicurei assentior ne usu, sea omnis prompta partiendo in. Oporteat consequuntur quo ea, ferri alterum pri eu. Ad eum oratio deterruisset, usu an detraxit disputationi. Nobis option ad eam. No vivendum honestatis mei. Aliquam alienum an mea, ad copiosae senserit moderatius nec. Ut sea virtute torquatos conceptam. Populo repudiandae te per. Ut denique consequuntur vel, at sea iisque appareat, te illum melius his. Diam graeco gubergren ex his. Sea in quem efficiantur, his agam sensibus ut, simul efficiantur cu nec. Latine nominati eam ex, unum debet ei eam. Amet doctus nec no, ne ipsum dicit nam. Cibo commodo reprimique sed ex. Sit ei intellegat scribentur, quot eligendi voluptaria vix an. In qui putent antiopam, laoreet admodum et mei. Dico vide oratio in pri, vel simul moderatius efficiantur te. Eam etiam falli ullamcorper ne, eu has cetero antiopam, et errem oportere vix. Nec justo movet recteque ea, ea vel ludus zril, has sumo animal ei. Vim erant gubergren similique ea, pro no ludus oblique. Ne natum tacimates reprehendunt mei, nostro scripta accumsan an eam. At tollit altera moderatius vel. Affert dolore duo at, ius quem pericula mediocritatem ea. Eum ipsum nulla mollis et, mei atqui menandri intellegam eu, qui ad malorum accumsan. Putant deleniti voluptatibus id eam, meis fastidii mnesarchum ea pri, te unum utroque eos. Cu case scriptorem pro. Est malis concludaturque te, an stet indoctum aliquando nec. Dicant tamquam ius et, et mei tantas recteque. Ne volutpat repudiare complectitur vix. Graeco electram omittantur at nec, bonorum dolorem maiorum est ne. Nec porro cetero indoctum ut, minim posidonium disputationi sed ei, iriure constituto his at. Oblique maiorum est ea. Quo habemus vituperata contentiones at, qui convenire imperdiet forensibus ei. Usu ferri disputationi ei, sonet repudiare hendrerit ut mea. Ex omnis utinam sit. Te eam facilis repudiare, vis inani moderatius ea, eu quot dicta sit. Congue facilisis eu sit, intellegam assueverit ei duo, te vix iusto laoreet persecuti. Discere percipit indoctum ei quo, praesent scribentur contentiones no vim, vix dicant nominati maluisset ei. Vim nullam omnesque singulis id, corpora petentium eos an. Cu vis legere animal, in nec ubique erroribus. In graecis intellegat constituto per, at suavitate forensibus conclusionemque mel. Qui in legere viderer posidonium, an sea nibh doming. Sed cu omittantur suscipiantur, no nam expetendis mediocritatem. Oblique aliquam cotidieque qui an, sit vidit solum postulant ad. Labores facilis ancillae ea mel, tale vivendo vis ad. Errem nostrum eum ex, ea est liber blandit, vide audiam ancillae id pro. Sea in saepe partem, quo ferri postea honestatis te. Nec tollit aperiri eu.</div>
    </section>
    </div>
    

    而对于 JS,它现在只是

    $('#affix_this').affix({
        offset: {
            top: 260
        }
    });
    

    【讨论】:

    • 哎,太简单了,我需要呼吸新鲜空气!谢谢
    • 您介意再看一下吗?我添加了一个页脚 div,它似乎有点:jsfiddle.net/wesweatyoushop/1yb1vLrp/1
    • @alex,我觉得小提琴看起来不错。
    • tx 看看。向下滚动时它有点偏离,“步骤”在内容之上。请参阅 screendump link 我有第三个问题 ;),如何将滚动部分添加到 affix nav/menu div?
    • 我总是看到内容的重叠,所以我认为这只是你以后用 CSS 修复的东西。您用于推送内容的相同 CSS 应该适用于这些步骤。 screen我还没有在附加的div中滚动,但我会尝试设置一个最大高度,然后设置溢出来滚动。
    猜你喜欢
    • 2016-08-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-06-18
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多