Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/6: Рейтинг темы: голосов - 6, средняя оценка - 5.00
1 / 1 / 0
Регистрация: 08.05.2014
Сообщений: 61

Фиксированное меню

30.08.2015, 19:09. Показов 1311. Ответов 4
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Есть верхнее меню которое находится ниже шапки. Но при ставке атрибута fixed меню остается на своем месте, ну в принципе как и должно быть. Но как сделать так чтобы при прокрутке сверху меню не было пустого места. То есть чтоб прокручивалось в самом верху.
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
30.08.2015, 19:09
Ответы с готовыми решениями:

Фиксированное меню
Ребята привет, я не силён в js. Очень нужна помощь, и уверен что решение супер простое. У меня стоит задача сделать так что бы верхнее...

Фиксированное меню при скролле
Всем привет. Я заметил одну интересную шапку у лпгенератор(не реклама). У них при скролле появляется меню, слева логотип, по...

Фиксированное меню на обратный скролл
Ищу давно, сам пытался, но как-то не вышло. Подскажите дураку, как сделать фиксированную шапку на обратный скролл, т.е. на скролл вверх....

4
52 / 52 / 39
Регистрация: 15.11.2014
Сообщений: 696
31.08.2015, 06:05
В общем где то решение видел и без jquery, но пока нашел только его.
JavaScript
1
2
3
4
5
6
7
8
$(window).scroll(function(){
        if ($(window).scrollTop() > 400) {
            $('menu').addClass('menu-fixed');
        }
        else {
            $('#menu').removeClass('menu-fixed');
        }
    });
В общем работает так.
Если страница прокручена на 400 пикселей, то к элементу меню присваивается класс menu-fixed. В css добавить к классу .menu-fixed{position:fixed;} ну и другие нужные стили. 400 пикселей это только для примера, нужно использовать число, которое является суммой всех, выше предшествующих элементов. В общем, сколько надо столько и используете. И когда прокручивается страница обратно на рубеж 400, или сколько там пикселей у вас будет, то класс убирается и остается только id menu.
В css примерно так:
CSS
1
2
3
4
5
6
7
8
9
10
#menu, .menu-fixed{
/*одни и те же стили, это же меню*/
}
#menu{
position:static;
}
.menu-fixed{
position:fixed;
top:0;
}
Цитата Сообщение от Amige Посмотреть сообщение
как сделать так чтобы при прокрутке сверху меню не было пустого места
В коде указано top:0, что означает, что между верхней границей браузера и верхней границей меню не будет промежутка.
Примерно так.
0
94 / 94 / 68
Регистрация: 26.03.2015
Сообщений: 248
31.08.2015, 08:39
Посмотрите эту тему.
0
1 / 1 / 0
Регистрация: 08.05.2014
Сообщений: 61
31.08.2015, 08:42  [ТС]
Цитата Сообщение от Mikhail Shell Посмотреть сообщение
В коде указано top:0, что означает, что между верхней границей браузера и верхней границей меню не будет промежутка.
Примерно так.
Спасибо, это мне и надо было. Но как сделать так чтобы только при прокрутке ставился top:0. Чувствую что в коде это уже есть. Но желательно можете разьяснить?
0
52 / 52 / 39
Регистрация: 15.11.2014
Сообщений: 696
31.08.2015, 09:06
Цитата Сообщение от Amige Посмотреть сообщение
Но как сделать так чтобы только при прокрутке ставился top:0.
В первом моем посте я писал код js и разъяснение к нему . А также нужно подключить jquery.
Цитата Сообщение от Mikhail Shell Посмотреть сообщение
JavaScript
1
2
3
4
5
6
7
8
$(window).scroll(function(){
if ($(window).scrollTop() > 400) {
 $('#menu').addClass('menu-fixed');
}
else {
 $('#menu').removeClass('menu-fixed');
}
});
А в html должно быть меню (div или что вы используете) c id="menu".
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
31.08.2015, 09:06
Помогаю со студенческими работами здесь

Фиксированное меню опускает слишком низко
Читал, что можно задавать значение через scrollTop, но не пойму как. В общем при нажатии на соответствующий пункт сайта, он опускается на...

Фиксированное меню с скролом, без overlaw:auto
Здравствуйте. Есть фиксированное меню на Js, вроде бы все отлично, но есть одно "НО". Когда меню не помещается на экране,...

фиксированное меню при прокрутке становится меньше
Всех приветствую! Подскажите, как добиться такого эффекта, чтобы менюшка, закреплённая вверху, при прокрутке становилась меньше. Пример...

Фиксированное верхнее меню, уменьшающиеся при скролинге
Всем привет! Помогите сделать верхнее меню как тут: https://wp.nkdev.info/youplay/blog-style-1/ меню сразу прибито к верху, это я смогу...

Фиксированное значение table,tr,td
Как задать фиксированное значение ширины и длины ячейки ? Пишу : <table width="100%" border="1"...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
Midnight Chicago Blues
kumehtar 24.03.2026
Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .
Контроль уникальности заводского номера - вариант №2
Maks 24.03.2026
В отличие от предыдущего варианта добавлено прерывание циклов, также добавлены новые переменные для сохранения контекста ошибки перед прерыванием цикла: Процедура ПередЗаписью(Отказ, РежимЗаписи,. . .
SDL3 для Desktop (MinGW): Вывод текста со шрифтом TTF с помощью библиотеки SDL3_ttf на Си и C++
8Observer8 24.03.2026
Содержание блога Финальные проекты на Си и на C++: finish-text-sdl3-c. zip finish-text-sdl3-cpp. zip
Жизнь в неопределённости
kumehtar 23.03.2026
Жизнь — это постоянное существование в неопределённости. Например, даже если у тебя есть список дел, невозможно дойти до точки, где всё окончательно завершено и больше ничего не осталось. В принципе,. . .
Модель здравоСохранения: работники работают быстрее после её введения.
anaschu 23.03.2026
geJalZw1fLo Корпорация до введения программа здравоохранения имела много невыполненных работниками заданий, после введения программы количество заданий выросло. Но на выплатах по больничным это. . .
Контроль уникальности заводского номера - вариант №1
Maks 23.03.2026
Алгоритм контроля уникальности заводского (или серийного) номера на примере документа выдачи шин для спецтехники с табличной частью. Данные берутся из регистра сведений, по которому настроено. . .
Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения
anaschu 22.03.2026
e7EYtONaj8Y Z4Tv2zpXVVo https:/ / github. com/ shumilovas/ med2. git
Программный отбор элементов справочника по группе
Maks 22.03.2026
Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор по наименованию группы. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru