<div id="fixed"> // Сюда вставляем любой код </div>
2. Скрипт фиксации
Как и всегда в подвале перед закрывающимся body или если вы предпочитаете, в шапке перед закрывающимся head
<script type="text/javascript"> $(document).ready(function () { var offset = $('#fixed').offset(); var topPadding = 0; $(window).scroll(function() { if ($(window).scrollTop() > offset.top) { $('#fixed').stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding}); } else { $('#fixed').stop().animate({marginTop: 0}); } }); }); </script>
В четвертой строке можете установить значение Padding от верхнего края. В 11 строке если нужно меняем значение margin от верхнего края. По умолчанию они стоят 0. Просто пишите величину в пикселях, но просто цифру, например 100.
Ставьте только цифры, обозначение в пикселях - px указывать не надо!
3. CSS стили
Далее в файле стилей style.css, добавляем следующий код.
Ширину меняйте, стили добавляйте, но position:absolute не трогайте. Это основное условие в стилях для корректного отображения фиксированного блока.
#fixed{width:200px;position:absolute;}
Сделав все по инструкции, результат не заставит себя ждать. Теперь можете организовать то что Вам нужно.
На этом все, спасибо за внимание 🙂