Пытаетесь заставить аффикс начальной загрузки работать правильно?

Я использую аффикс начальной загрузки, чтобы прикрепить div и nav div с левой стороны. Но простое добавление аффикса класса к двум элементам div, которые мне нравятся, не помогло. http://jsfiddle.net/wesweatyoushop/rmuq25ak/4/

Оба div могут прокручиваться, скажем, на 260 пикселей, а затем должны прилипать, но они перекрываются.

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

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

person alex    schedule 20.10.2014    source источник


Ответы (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
    }
});
person Doyle Lewis    schedule 20.10.2014
comment
Ай, так просто, мне нужно подышать свежим воздухом! спасибо - person alex; 20.10.2014
comment
ты не против взглянуть еще раз? я добавил нижний колонтитул div, и он выглядит примерно так: jsfiddle.net/wesweatyoushop/1yb1vLrp/ 1 - person alex; 21.10.2014
comment
@alex, мне кажется, скрипка выглядит нормально. - person Doyle Lewis; 21.10.2014
comment
tx для просмотра. это немного не так, когда вы прокручиваете вниз, шаги находятся над содержимым. См. скриншот ссылка. У меня есть третий вопрос;), как мне добавить часть прокрутки к аффиксу раздел навигации/меню? - person alex; 21.10.2014
comment
Я всегда видел наложение контента, поэтому я решил, что это просто то, что вы исправите с помощью CSS позже. Тот же CSS, который вы используете для перемещения содержимого, должен работать для шагов. экран Я не делал прокрутку в добавленном div, но я бы попробовал установить максимальную высоту, а затем установить переполнение для прокрутки. - person Doyle Lewis; 21.10.2014