jQuery固定ヘッダーで妥当性確認

Question

私はjQuery validate pluginを使用していますが、固定ヘッダーがあります。

私は送信ボタンを押して、必要なフィールドが見つからない場合、プラグインはフィールドに直接ジャンプし、必須であることを示します。しかし、私は固定ヘッダーを持っているので、プラグインはフィールドにジャンプし、固定ヘッダーの下にあるので、プラグインはそれを見ることができません。これをどうすれば解決できますか？ここで

は、最小限のサンプルコードとTEH関連するjFiddle

$("#awesome").validate({ 
    rules: { 
     name: "required" 
    } 
}); 

form { 
    margin-top: 50px; 
} 

.top-menu { 
    height: 50px; 
    background-color: rgba(23,123,23,0.3); 
    font-size: 16px; 
    color: #FFF; 
    text-align: center; 
    position: fixed; 
    top: 0; 
    width: 100%; 
} 

<div class='top-menu'>Fixed Menu</div> 
<form id='awesome' method='POST' > 
    <input type='text' id='name' name='name'> 
    <div style='height:3000px;background-color:red;'></div> 
    <input type='submit'> 
</form> 

編集されています。私はoffsetting an html anchor to adjust for fixed headerに似て解決策を探しています。プラグインが「必須」フィールドにどのようにスクロールするかはわからないので、少し困惑しています。私はプラグインの中でメソッド 'scrollTo'のようなものを見つけられませんでした。私がコードセクションを見つけると、スクロール先のオフセットを単純に変更することができますか？

Answer 1

を私は、この追加のjQueryのスクリプトでそれを修正することができた（jFiddleを参照してください）：

$("input").focus(function(){ 
     var elementOffset = $(this).offset().top, 
     scrollTop  = $(window).scrollTop(), 
     distance  = (elementOffset - scrollTop); 

     var addSpace = 50 - distance; 

     if(addSpace > 0) 
     { 
      var y = $(window).scrollTop(); 
      $(window).scrollTop(y-addSpace); 
     } 
    }); 

Answer 2

はこのCSSを追加してみてください：

form#awesome input[type="text"]:focus { 
    margin-top: 40px; 
} 

あなたはあなたが必要とどのくらいのこれまでトップのマージンを変更することができます。

Answer 3

上記の要素を別の要素の上に表示するには、z-index Propertyを使用する方法があります。

つまり、あなたのエラー要素にこれを行うことができます。

.error{ 
    z-index:99; 
    position: relative; 
} 

ここ

JsFiddle Demo

Answer 4

は、固定ヘッダを使用してjQueryの検証、フォームの修正バージョンのコードです。

JSFiddleデモ： https://jsfiddle.net/o4dfhtgc/2/

デモチェック：

$("#awesome").validate({ 
 
    rules: { 
 
     name: "required" 
 
    } 
 
});

body { 
 
    padding: 0; margin: 0; 
 
} 
 
form{ 
 
    margin-top: 50px; 
 
    padding: 10px; 
 
} 
 
.top-menu{ 
 
    height: 50px; 
 
    background-color: rgba(23,123,23,0.3); 
 
    font-size: 16px; 
 
    color: #FFF; 
 
    text-align: center; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 
label#name-error { 
 
    display: inline-block; 
 
    padding-left: 5px; 
 
    color: #ffffff; 
 
} 
 
input[type="submit"] { 
 
    display: block; 
 
    margin-top: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script> 
 
<div class='top-menu'> 
 
    Fixed Menu 
 
</div> 
 

 
<div style='height:3000px; background-color:red;'> 
 
    <form id='awesome' method='POST' > 
 
    <input type='text' id='name' name='name'> 
 
    <input type='submit'> 
 
    </form> 
 
</div>