Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.64/11: Рейтинг темы: голосов - 11, средняя оценка - 4.64
2 / 2 / 0
Регистрация: 13.05.2013
Сообщений: 117

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

09.06.2016, 12:45. Показов 2196. Ответов 4
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Добрый день. Подскажите, как побороть проблему.
Есть скрипт, который скролит страницу при клике на якорь
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
if($(".product-tabs")[0]){
    function productTabs() {
      var currentUrl = window.location.href;
      var tabID = currentUrl.split("#")[1];
      var tabsTop = $(".product-tabs").offset().top;
      if(typeof tabID !== 'undefined') {
        //console.log(tabID,tabID.length);
        $(".product-tabs .tabs-names .tab[data-id="+tabID+"]").trigger("click");
        $(document).scrollTop(tabsTop);
      } else {
        $(".product-tabs .tabs-names .tab").eq(0).trigger("click");
      }
    }
    productTabs();
    $(window).on("hashchange", function(e) {
      productTabs();
    })
  }
Работает, но проблема в том, что на сайте фикс меню, а следовательно верх наезжает на контент. Пытался из offset().top() вычесть нужное количесто пикселей - не помогло. Куда еще копнуть?

Спасибо!
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
09.06.2016, 12:45
Ответы с готовыми решениями:

Фиксированное Хедер при скролле
Доброго времени суток! Нужна помощь в фиксированном меню (шапка), при прокрутке шапка распологается под ссылкой <a...

Фиксированное меню при скроле
Есть скрипт: $(function(){ $(window).scroll(function() { var top = $(document).scrollTop(); if (top < 160)...

Фиксированное меню
Здравствуйте! Есть меню, которое прикреплено к верхнему краю окна, и при прокрутке страницы вверх/вниз оно также остается...

4
 Аватар для Kraken73
105 / 93 / 50
Регистрация: 17.09.2015
Сообщений: 612
09.06.2016, 13:33
Цитата Сообщение от AlexBelkevich Посмотреть сообщение
Пытался из offset().top() вычесть нужное количесто пикселей
ну вроде правильно все делал
JavaScript
1
2
var tabsTop = $(".product-tabs").offset().top;
tabsTop = parseInt(tabsTop) - 100;// высота меню
не работает так?
0
Ренегат
Эксперт HTML/CSS
 Аватар для BANO
1740 / 1085 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
09.06.2016, 15:07
******73, а меню моет быть динамическим
тогда надо через .height() вроде

Не по теме:

но я бы сделал через натив конечно

0
2 / 2 / 0
Регистрация: 13.05.2013
Сообщений: 117
09.06.2016, 15:55  [ТС]
******73, Да.. так не работает(

Добавлено через 20 секунд
BANO, Да меню там статика..
0
 Аватар для Kraken73
105 / 93 / 50
Регистрация: 17.09.2015
Сообщений: 612
09.06.2016, 16:06
Лучший ответ Сообщение было отмечено AlexBelkevich как решение

Решение

Взял первый попавшийся скрипт и попробовал, все работает
JavaScript
1
2
3
4
5
6
7
8
9
$(document).ready(function() {
  $('a[href^="#"]').click(function() {
    var el = $(this).attr('href');
    $('body').animate({
      scrollTop: ($(el).offset().top - 100)
    }, 2000);
    return false;
  });
});
Добавлено через 1 минуту
Цитата Сообщение от BANO Посмотреть сообщение
а меню моет быть динамическим
тогда надо через .height() вроде
с учетом этого
JavaScript
1
2
3
4
5
6
7
8
9
$(document).ready(function() {
  $('a[href^="#"]').click(function() {
    var el = $(this).attr('href');
    $('body').animate({
      scrollTop: ($(el).offset().top - $(".menu").height())
    }, 2000);
    return false;
  });
});
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
09.06.2016, 16:06
Помогаю со студенческими работами здесь

Фиксированное меню
На мобильной версии фиксированное меню, при скролле меню уходит вверх, а потом становится на место, получаются скачки, кто знает как это...

Фиксированное трехуровневое меню
Привет всем, помогите пожалуйста. Есть главное меню. При прокрутке страницы вниз появляется фиксированное меню, в котором есть...

Фиксированное левое меню, когда сужается по высоте то начинает скроллится
Подскажите как реализовать такое левое меню как тут ? Оно при уменьшении высоты экрана начинает прокручиваться, возможно какой то...

Старт анимации при скролле
доброго времени суток! хочу понять как можно реализовать старт анимации при прокрутке до него, вот у меня есть скрипт, каким образом мне...

Перемещение элемента при скролле
Здравствуйте, есть такой код, $(window).scroll(function() { if ($(this).width() > 1000) { if ($(this).scrollTop() >= 400) { ...


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

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
делаю науч статью по влиянию грибов на сукцессию
anaschu 13.03.2026
прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++
8Observer8 10.03.2026
Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:
Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE
8Observer8 10.03.2026
Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки
Neotwalker 08.03.2026
Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages
DevAlt 07.03.2026
Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F#
DevAlt 06.03.2026
В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .
Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование
8Observer8 05.03.2026
Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D
8Observer8 04.03.2026
Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru