Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.06.2016, 10:02
Аспирант
Отправить личное сообщение для Alexbelkevich Посмотреть профиль Найти все сообщения от Alexbelkevich
 
Регистрация: 02.10.2014
Сообщений: 52

Фиксированно меню и якори
Добрый день. Подскажите, как побороть проблему.
Есть скрипт, который скролит страницу при клике на якорь
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() вычесть нужное количесто пикселей - не помогло. Куда еще копнуть?

Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 09.06.2016, 10:05
Аватар для EmperioAf
Профессор
Отправить личное сообщение для EmperioAf Посмотреть профиль Найти все сообщения от EmperioAf
 
Регистрация: 15.01.2015
Сообщений: 622

Лучше сразу добавьте html-код
Ответить с цитированием
  #3 (permalink)  
Старый 09.06.2016, 10:09
Аспирант
Отправить личное сообщение для Alexbelkevich Посмотреть профиль Найти все сообщения от Alexbelkevich
 
Регистрация: 02.10.2014
Сообщений: 52

<div class="product-tabs" id="product-tabs">
    <ul class="about-product">
        <li id="descrip" class="active" data-page="0">Описание</li>
        <li id="characteristics" data-page="1" class="">Характеристики</li>
        <div class="infoblock">

          <div id="tab1" style="display: none;">
            <p style="text-align: justify;">Текст<p>      
          </div>

          <div id="tab2" style="display: block;">
    
          <div id="tab1" style="display: none;">
            <p style="text-align: justify;">Текст<p>      
          </div>

          </div>  
        </ul>
                                                                                </div>
    </div>


Знаю, что сделано странно (наверное, лучше на ссылки вешать событие, но отдали на доработку). Саму страницу можно тут увидеть (под фотками якоря)
Ответить с цитированием
  #4 (permalink)  
Старый 09.06.2016, 12:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

Alexbelkevich,
для начала перенесите jquery из строки 58 в строку 5
Ответить с цитированием
  #5 (permalink)  
Старый 09.06.2016, 13:12
Аспирант
Отправить личное сообщение для Alexbelkevich Посмотреть профиль Найти все сообщения от Alexbelkevich
 
Регистрация: 02.10.2014
Сообщений: 52

Сообщение от рони Посмотреть сообщение
Alexbelkevich,
для начала перенесите jquery из строки 58 в строку 5
Перенес
Ответить с цитированием
  #6 (permalink)  
Старый 09.06.2016, 13:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

Alexbelkevich,
строка 9 первый пост
$(window).scrollTop(tabsTop-30);
Ответить с цитированием
  #7 (permalink)  
Старый 09.06.2016, 13:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

Сообщение от Alexbelkevich
Перенес
проверьте кеш, пока не видно переноса.
Ответить с цитированием
  #8 (permalink)  
Старый 09.06.2016, 13:38
Аспирант
Отправить личное сообщение для Alexbelkevich Посмотреть профиль Найти все сообщения от Alexbelkevich
 
Регистрация: 02.10.2014
Сообщений: 52

рони,
Спасибо!)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Замена стилей класса Павел Турченко Элементы интерфейса 9 30.10.2015 15:24
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 20:59
Текуший пункт меню и разные родители Kiano Элементы интерфейса 17 08.01.2015 07:59
Выделение активных пунктов многоуровневого меню на jQuery Letto Элементы интерфейса 2 04.12.2013 15:30
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36