Денис Беляев

В jQuery есть специальный метод .offset() для получения координат элемента относительно документа. Чтобы получить расстояние от верха страницы до шапки используйте вот такой код: $('<селектор шапки>').offset().top

На чистом Javascript всё немного сложнее. Сначала нужно получить координаты объекта на странице с помощью getBoundingClientRect() а после этого прибавить к этим координатам значение скроллинга. Вот функция, которая работает аналогично jQuery.offset() (взято здесь):

function offset(el) {
    var rect = el.getBoundingClientRect(),
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}

Видимость элемента изменяется в конце анимации, то есть, в вашем случае, через 400 миллисекунд. Получается, что вы проверяете условие видимости ещё до того, как элемент #filter появится или исчезнет.

Используйте callback функцию по завершению. Вот так код заработает:

$('.dop').on('click', function () {
    var $btn = $(this);
    $('#filter').toggle(400, function () {
        if ($(this).is(':hidden')) {
            $btn.html('Показать дополнительные параметры поиска');
        }
        if ($(this).is(':visible')) {
            $btn.html('Скрыть дополнительные параметры поиска');
        }
    });
});

Не забудьте, что код должен выполняться после загрузки DOM.