Приклеивающийся к верху экрана блок, с отступом.
1 ответов
Проще простого. Вам на jQuery? Тогда вот:
$(document).ready(function() {
// элемент, который должен «прилепляться» к краю окна
var search_bar = $('#my_search_bar');
// задаём отступ от края окна браузера, если не хочется
// чтобы элемент прилеплялся вплотную к границе окна
var margin = 10;
// при каком кол-ве «прокрученных пикселей» элемент должен
// «прилепляться» к окну;
var borderY = search_bar.offset().top - margin;
// обработчик будет вызывать постоянно в процессе прокрутки документа
$(window).bind('scroll', function()
{
// запоминаем на сколько пикселей сейчас прокручен документ
var currentY = $(document).scrollTop();
if(currentY > borderY)
{
// пора «вырывать» элемент из документа и прилеплять его к окну;
// для этого присваиваем его свойствам CSS
search_bar.css({position: 'fixed', top: margin + 'px'});
}
else if(currentY < borderY)
{
// теперь пользователь прокрутил окно обратно вверх,
// пора вернуть элемент на исходное место;
// для этого возвращаем изменённые значения свойств CSS
// к изначальным
search_bar.css({position: '', top: ''});
}
});
});
Примечания.
- position: fixed позволит нужному элементу не прокручиваться с остальным окном
- присваивание свойствам CSS пустой строки через JavaScript, их не обнуляет (как многие неправильно думают), а возвращает к исходным значениям, т.е. заданным в вашем CSS-файле.
Если надо на чистом JS — говорите.
Использую вариант с jquery. У меня блок сделан в виде таблицы(width=100%) в div. Тоесть размер полосы меньше чем ширина экрана. Когда он "отлипает" то растягивается вправо - смещается одна из ячеек вправо. Как этого можно избежать?
Есть проблемка по данной теме.
Сразу скажу, что я любитель и не учился на программиста, поэтому могут быть смешные ошибки, будьте благосклонны, плиз!
Итак, для своего сайт я сделал блок, который прилеплен в верхней части браузера и при прокрутке страницы остается на месте - вот как это выглядит на сайте - www.partytime.com.ua
В принципе меня все устраивает, и на компьютерах в разных браузерах все выглядит вроде бы как корректно.
Но на планшете заметил кое-какой бок! Кстати, в Ваших примерах - он тоже есть.
При увеличении масштаба в браузере - через ctrl и + - когда страница по горизонтали перестает помещаться в браузере - появляется горизонтальная прокрутка, которой можно двигать содержимое влево и вправо.... все двигается, но верхняя панель мертво стоит на месте - причем слегка кривовато....
Конечно, не думаю, что это будет проделывать каждый пользователь, но лично меня это бесит и хотелось бы сделать так, чтобы можно было двигать влево и вправо полностью все содержимое страницы, учитывая и верхнюю панель.
Понимаю, что на это оказывает свое воздействие свойство position: fixed;
Можно было бы как-то задать этот фиксед только по вертикали и освободить по горизонтали???
#menuxa {
width: 1010px;
height: 40px;
border-bottom: 2px solid #444;
border-radius: 0 0 8px 8px;
background-color: #666;
position: fixed;
z-index: 10000;
cursor: pointer;
opacity: 0.9;
overflow: hidden;
}
Если кто-то даст ответ - буду премного благодарен!
Заранее всем спасибо!