Javascript.RU

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

Проблема с синтаксисом
Нашла в интернете скрипт фиксированной навигации. Мне нужно, чтобы он не просто слайдился до якоря, а отбивал сверху 200px, то есть становился на позицию на 200px ниже. Я пока новичок в jquery, помогите подправить =)


Вот демка этого скрипта demo.webcareer.ru/2016/01/change_active_nav/

<header class="sticky-header">
	        <div class="top-menu">
	            <ul>
	                <li><a class="" href="#home">Главная</a></li>
	                <li><a href="#about" class="active">О нас</a></li>
	                <li><a href="#service" class="">Услуги</a></li>
	                <li><a href="#contact" class="">Контакты</a></li>
	            </ul>
	        </div>
	    </header>


var menu_selector = ".nav"; // Переменная должна содержать название класса или идентификатора, обертки нашего меню. 
 
function onScroll(){
    var scroll_top = $(document).scrollTop();
    $(menu_selector + " a").each(function(){
        var hash = $(this).attr("href");
        var target = $(hash);
        if (target.position().top-250 <= scroll_top && target.position().top + target.outerHeight() > scroll_top) {
            $(menu_selector + " a.active").removeClass("active");
            $(this).addClass("active");
        } else {
            $(this).removeClass("active");
        }
    });
}
 





$(document).ready(function () {
 
    $(document).on("scroll", onScroll);
 
    $("a[href^=#]").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-250
        }, 500, function(){
            window.location.hash = hash;
            $(document).on("scroll", onScroll);
        });
 
    });
 
});

Последний раз редактировалось Darth_Pandora, 23.05.2017 в 10:21.
Ответить с цитированием
  #2 (permalink)  
Старый 23.05.2017, 11:11
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Вот в этой строчке не - 250 а +200
scrollTop: target.offset().top+200


А если вам надо чтоб сама менюшка ниже была в CSS укажите
.sticky-header {
      position: fixed;
      top: 200px; 
    }

Последний раз редактировалось j0hnik, 23.05.2017 в 11:15.
Ответить с цитированием
  #3 (permalink)  
Старый 23.05.2017, 11:31
Аватар для Darth_Pandora
Аспирант
Отправить личное сообщение для Darth_Pandora Посмотреть профиль Найти все сообщения от Darth_Pandora
 
Регистрация: 29.11.2016
Сообщений: 49

Ой как глупо получилось) top-250 я сама указала, а оно у меня не сдвинулось и я подумала, что не туда вставила, так как не очень с js дружу, а оказалось это из-за кэша) Спасибо)
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с синтаксисом j0hnik Общие вопросы Javascript 4 06.12.2016 17:56
1 строка, проблема с синтаксисом dreamfactor Общие вопросы Javascript 3 15.06.2014 21:50
Проблема с радио кнопками px379 Общие вопросы Javascript 8 29.07.2013 09:30
Проблема с обработкой ескольких .hover() anocean jQuery 3 15.06.2012 22:43
Проблема, в менюшке Большой джо Элементы интерфейса 0 12.07.2009 17:12