Навигация с прокруткой на фиксацию не тормозитHtml

Программисты Html
Ответить
Anonymous
 Навигация с прокруткой на фиксацию не тормозит

Сообщение Anonymous »

Используя это руководство, я пытался сделать эту навигационную работу, но все еще не повезло.
Я попробовал скрипать и редактировать с помощью JavaScript /CSS, и это мой код: < /p>
...
Navigation

Content goes here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis eleifend suscipit. Vestibulum pulvinar nisi et felis consequat, in iaculis est tristique. In porttitor tempus ligula non finibus. Aenean maximus purus odio, ut pharetra mauris laoreet eu. Integer at lorem ut erat viverra euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum dui mi, vehicula vitae lorem ac, mollis facilisis diam. Integer non nisi at ante posuere dignissim sed sed quam. Sed neque lectus, volutpat vel quam ac, malesuada venenatis lorem. Etiam tempus arcu augue, in dapibus ante aliquet commodo. Pellentesque faucibus nisi est, id feugiat ipsum malesuada a. Donec consectetur tellus eget augue elementum, vel ultricies dolor tempor. Proin nulla turpis, molestie at sagittis sed, mattis quis ante. Mauris et facilisis tortor, non ornare orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut luctus ac neque quis vestibulum. Maecenas ultricies mattis diam, vel lacinia dui scelerisque ut. Vestibulum luctus purus ut orci tincidunt fringilla. Praesent non urna pellentesque, cursus augue ut, ornare eros. Etiam commodo erat et tellus dictum vestibulum. In porttitor elit elit, ac rhoncus magna ultricies sit amet. Morbi quis ex quam. Integer vel nunc enim. Praesent mattis, odio eget cursus malesuada, odio ipsum pulvinar urna, eu lobortis orci nisl vel velit. Nam fringilla, nulla ac consectetur tempor, neque sem viverra urna, vel congue sapien nunc eget velit. Duis vel dui ipsum. Nunc dolor dui, luctus eget augue ac, posuere sollicitudin erat. Nulla facilisi. Etiam pellentesque, urna id cursus aliquam, enim tortor aliquet lorem, nec semper lorem est id nibh. Sed eget nisl vitae sem pretium finibus et ac dui. Integer vitae tortor vel magna feugiat accumsan. Vivamus dictum metus eget nisl posuere, gravida egestas ante volutpat. Mauris porttitor, nisl vitae vehicula fermentum, ante augue vehicula nibh, tristique scelerisque ante tortor ac diam. Fusce felis erat, porta vel purus eget, finibus egestas mi. Cras interdum velit sit amet ultricies venenatis. Mauris vehicula bibendum dui sit amet tincidunt. Vestibulum sodales, felis sit amet imperdiet fermentum, orci purus venenatis ipsum, at euismod magna nisi sit amet purus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin a purus turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque facilisis fermentum vulputate. Nulla quis nisi in enim bibendum consequat. Sed pharetra porta aliquam. Fusce neque nulla, vulputate sed mauris id, rhoncus fermentum velit. Nunc tempor vehicula tortor vel ullamcorper. Etiam laoreet porttitor elit, ut vulputate felis commodo eu. Pellentesque suscipit, risus eu finibus semper, arcu velit bibendum metus, vel mattis erat massa sit amet nisl. Maecenas hendrerit facilisis risus, eget fringilla leo consectetur ac. Integer eget justo ullamcorper, vehicula ex nec, tincidunt nulla. Integer ipsum odio, condimentum sed nulla nec, ultricies porta ligula. In convallis, nisl in interdum finibus, velit justo cursus turpis, ut mattis neque quam id magna. Quisque feugiat mauris at malesuada placerat. Donec malesuada urna sed euismod dapibus.


@charset "UTF-8"; body { background-color:#FAFAFA; margin:0; padding-top:775px; } #featured { position:relative; margin-top:0; height:600px; width:100%; margin-bottom:20px; } header, .navigation-scroll {position:fixed; width:100%; top:0;} header { background-color:#000000; height:775px; width:100%; } .elearning, #navigation {position:relative;} #navigation { height:40px; background-color:#202020; z-index:150; box-shadow:0 2px 3px rgba(0,0,0, .4); } article { height:700px; border-top:#EAEAEA solid 2px; } section { width:1000px; margin-left:auto; margin-right:auto; position:relative; }

// nav.js $(document).ready(function() { var mn = $("#navigation"); $(window).scroll(function() { if($(this).scrollTop() > 775 ) { mn.addClass("navigation-scroll"); } else { mn.removeClass("navigation-scroll"); } }); });
< /code>
У меня есть ощущение, что проблема вызвана позиционированием DOV в CSS. Есть идеи?
заранее! < /P>

Подробнее здесь: https://stackoverflow.com/questions/435 ... esnt-stick
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»