Jquery smoothscroll vs dynamic height

Question

Я создал персональный сайт, где я хочу использовать скрипт smoothscroll. Все работает нормально, но я хочу изменить высоту заголовка, когда вы нажимаете на что-то.

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

Таким образом, это 500px, правильное положение. Как с этим бороться?

Вы можете увидеть this сайт.

Вы можете увидеть заголовок HTML, мое Javascript и CSS я попытались www.jsfiddle.net/brxoekdm/

Спасибо за каждую идею, как решить эту проблему.

Answer 1

Хм, идеи у нас есть!

Если проблема заключается в изменении позиции, чем привязка прокрутки к одному элементу вместо фиксированного пикселя;

допустим в меню вы кнопки имеют с Я не знаю, класс: 'пункта меню':

Предполагая

<img class="menu-item" data-target="#my-target-selector"/> 

так:

var menuSelector 

menuSelector = $('.menu-item'); 
menuSelector.on('click', function(event){ 
    event.preventDefault(); 

    var $self, target; 
    $self = $(this); 
    target = $self.data('target'); 
    // Go 
    $.smoothScroll({ 
     scrollTarget: target 
    }); 
}); 

Это это только одна идея о том, как его решить :) Элементы могут иметь смещение, пересчитываемое окном, каждый раз, когда они меняются, оно является родным. Так что безопаснее полагаться на него.

О, и я supose вы говорите об этом smoothscroll: https://github.com/kswedberg/jquery-smooth-scroll

Ура!

---- Обновление

После того как я посмотрел на свой веб-сайт, я понял. «Проблема» - это порядок действий.

Вы скрываете заголовок, преобразуя его в мини-заголовок, в то время как прокрутка вычисляется, в этом случае вы должны использовать обратный вызов и прокрутку после того, как вы спрячете заголовок, или используйте другую функцию css для достижения мини- заголовок.

Как я справляюсь лучше с JavaScript, давайте создадим одну идею для вас :)

Здесь я немного изменился, но главная идея потока: Скрыть ваш заголовок первого, а затем прокрутите вниз.

Я взял функцию из ваших core.js файл

var menuSelector, hideHeader, showHeader, $window, $header, $head; 

$window = $(window); 
$header = $(".header-top"); 
$head = $("header"); 


hideHeader = function(next){ 
    $header.removeClass('.header-top').addClass("fixed"); 
    $head.addClass("mini"); 
    if(next !== undefined){ 
     next(); 
    } 
}; 

showHeader = function(next){ 
    $header.removeClass("fixed").addClass('.header-top'); 
    $head.removeClass("mini"); 
    if(next !== undefined){ 
     next(); 
    } 
}; 

$window.scroll(function() { 
    var scroll = $window.scrollTop(); 
    if (scroll >= 40) { 
     hideHeader(); 
    } else { 
     showHeader(); 
    } 
}); 

menuSelector = $('.menu-item'); 
menuSelector.on('click', function(event){ 
    event.preventDefault(); 
    var $self, target; 
    $self = $(this); 
    target = $self.data('target'); 
    // Let's hide first and scroll later 
    hideHeader(function(){ 
     $.smoothScroll({ 
      scrollTarget: target 
     }); 
    }) 
});