Bad отображения ошибок сообщений

Question

я столкнулся с проблемой при попытке отображения сообщений об ошибках HTML5 при отправке формы, как показано на this screen shot:

Темно-серая полоса сверху моя панель навигации.

Проблема в том, что моя форма немного длинная, поэтому вам нужно прокрутить вниз, чтобы подтвердить. Однако, если вы не заполнили поле, содержащее требуемый тег, страница автоматически сдвинется вверх, чтобы отобразить сообщение об ошибке. Проблема в том, что сообщение об ошибке покрывает мою навигационную панель, которая содержит поле для заполнения необходимой информации.

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

Я также использую самонаклад.

код от комментариев ниже:

var animate = true; 
$("input,select,textarea").bind("invalid", function() { 
    console.log('Invalid'); 
    var offset = $(this).offset(); 
    offset.top -= 200; 
    if (animate) { 
     animate = false; 
     $('html, body').animate({ scrollTop: offset.top }, 10, function() { 
      animate = true; 
     }); 
    } 
}); 

Спасибо заранее,

Answer 1

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

style="margin-top :100px;"