Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.06.2017, 15:13
Аватар для Darth_Pandora
Аспирант
Отправить личное сообщение для Darth_Pandora Посмотреть профиль Найти все сообщения от Darth_Pandora
 
Регистрация: 29.11.2016
Сообщений: 49

Косолапость с якорями с других страниц
Эх, я снова к вам за советом.

Вообщем есть страница. На ней есть якоря. Сверстана она криво ... (а может и не криво, во всяком случае мозгов сверстать у меня хватило только так.) В итоге мне пришлось задавать отступ якорю на 170px ниже

В итоге получился у меня такой код. Смотрите ниже.

Внимание вопрос: Как сделать так, чтобы при переходе на другую страницу якорь становился на тоже место?

Попробовала так:

Пример:

test.ru/index.php#home

Оно переходит но встаёт ровно на метке, а мне нужно на 170px ниже

Понимаю, что нужно добывить в js переход на index.php но чёрт, у меня трабблы с синтаксисом. Помогите, плиииз

<ul class="nav navbar-nav main-nav">
        <li><a href="#home" class="active">home</a></li>
        <li><a href="#product">product</a> </li>
        <li><a href="#partner">partner</a> </li>
      </ul>


$(document).ready(function () {
    var menu_selector = ".main-nav";

function onScroll(){
    var scroll_top = $(document).scrollTop();
    $(menu_selector + " a").removeClass("active").each(function(){
        var hash = $(this).attr("href");
        var target = $(hash);
        var height = target.outerHeight();
        if (target.position().top - 170 <= scroll_top && target.position().top - 170 +  height > scroll_top) {
            $(this).addClass("active");
        }
    });
}
    $(document).on("scroll", onScroll);

    $(menu_selector + " a").click(function(e){
        e.preventDefault();
        $(document).off("scroll");
        $(menu_selector + " a.active").removeClass("active");
        $(this).addClass("active");
        var hash = $(this).attr("href");
        var target = $(hash);

        $("html, body").animate({
            scrollTop: target.offset().top-170
        }, 500, function(){
          history.replaceState(history.state, document.title, location.href.replace(/#.*$/g, '') + hash);
          $(document).on("scroll", onScroll);
        });

    });

});
Ответить с цитированием
  #2 (permalink)  
Старый 09.06.2017, 15:19
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,230

Сообщение от Darth_Pandora
Оно переходит но встаёт ровно на метке, а мне нужно на 170px ниже
Сначала создать проблему... А потом мужественно ее преодолевать...

Может продуктивнее таки задавить ее в зародыше. Т.е. сделать нормальную верстку?
Ответить с цитированием
  #3 (permalink)  
Старый 09.06.2017, 15:38
Аватар для Darth_Pandora
Аспирант
Отправить личное сообщение для Darth_Pandora Посмотреть профиль Найти все сообщения от Darth_Pandora
 
Регистрация: 29.11.2016
Сообщений: 49

ksa, эм, тут даже более не моя проблема, а bootstrap-a скорее. Исправлю одно, потяну за собой другое.
Ответить с цитированием
  #4 (permalink)  
Старый 09.06.2017, 18:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,127

Darth_Pandora,
добавить в строку 33
var hash = window.location.hash;
hash && $("a[href='"+hash+"']").click()
Ответить с цитированием
  #5 (permalink)  
Старый 12.06.2017, 09:24
Аватар для Darth_Pandora
Аспирант
Отправить личное сообщение для Darth_Pandora Посмотреть профиль Найти все сообщения от Darth_Pandora
 
Регистрация: 29.11.2016
Сообщений: 49

рони,
Выдаёт эти ошибки:

Missing use strict statement
Expected an assignment or function call and instead saw an expression
Missing semicolon
Ответить с цитированием
  #6 (permalink)  
Старый 12.06.2017, 10:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,127

Darth_Pandora,
у вас так?
$(document).ready(function () {
    var menu_selector = ".main-nav";

function onScroll(){
    var scroll_top = $(document).scrollTop();
    $(menu_selector + " a").removeClass("active").each(function(){
        var hash = $(this).attr("href");
        var target = $(hash);
        var height = target.outerHeight();
        if (target.position().top - 170 <= scroll_top && target.position().top - 170 +  height > scroll_top) {
            $(this).addClass("active");
        }
    });
}
    $(document).on("scroll", onScroll);

    $(menu_selector + " a").click(function(e){
        e.preventDefault();
        $(document).off("scroll");
        $(menu_selector + " a.active").removeClass("active");
        $(this).addClass("active");
        var hash = $(this).attr("href");
        var target = $(hash);

        $("html, body").animate({
            scrollTop: target.offset().top-170
        }, 500, function(){
          history.replaceState(history.state, document.title, location.href.replace(/#.*$/g, '') + hash);
          $(document).on("scroll", onScroll);
        });

    });

var hash = window.location.hash;
hash && $("a[href='"+hash+"']").click();

});
Ответить с цитированием
  #7 (permalink)  
Старый 12.06.2017, 13:42
Аватар для Darth_Pandora
Аспирант
Отправить личное сообщение для Darth_Pandora Посмотреть профиль Найти все сообщения от Darth_Pandora
 
Регистрация: 29.11.2016
Сообщений: 49

Да, так.

Это главная страница, меню работает.

http://burjuy.issohost.com/hTechInvest_bootstrap/

А с внутренней, например с этой не переходит

http://burjuy.issohost.com/hTechInve...uct_custom.php

Вот в этом файле js код:

<script src="js/custom-menu-ex.js"></script>
Ответить с цитированием
  #8 (permalink)  
Старый 12.06.2017, 16:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,127

Darth_Pandora,
а нельзя jquery загрузить всего 1 раз(1.12.4), потом все jquery-plugin, потом весь код на основе jquery и только потом в самом конце bootstrap?
Ответить с цитированием
  #9 (permalink)  
Старый 13.06.2017, 09:48
Аватар для Darth_Pandora
Аспирант
Отправить личное сообщение для Darth_Pandora Посмотреть профиль Найти все сообщения от Darth_Pandora
 
Регистрация: 29.11.2016
Сообщений: 49

рони, можно, но только как это мне поможет с меню?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поиск страниц по ключевым словам stormageddon Events/DOM/Window 5 22.06.2013 21:09
Неповторяющаяся заставка (при возвращении с других страниц сайта) thrastogotch jQuery 3 07.06.2012 17:57