最上部で引っかかるような動作を改善したい

Question

こんにちは。
初めての利用で、ぎこちないですが、お願いします !

最上部のガクンとなるところを直したいです。
または、もっとスマートな方法があればそちらへのりかえてみたいです。

上部のヘッダーを固定するところまでは完成しましたが、
いちばん上だけが、マウスで上下にスクロールするときに、引っかかります。
よく観察すると解りますが、がくんとなります。
ネットでヘッダーを固定する方法をいろいろと調べたのですが、何故か私のほうに nav タグで固定すると、どれもこれも同じような動作になりました。
自分なりにいじってみた結果が

html :
http://n-slow-life.sakura.ne.jp/main_test.htm

css :
http://n-slow-life.sakura.ne.jp/css/norippy_style_white_test.css

javascript :
http://n-slow-life.sakura.ne.jp/js/menu.js

です。

css で calc で fixed する幅を調整しています。
どうすればこのひっかかる動作を改善できるかを知りたいです。
細かいところを観察すると、その引っかかる分だけは、ヘッダーの左右のグレーの線も消えてしまいます。

何か良い案がありましたら教えてください… !

いじる前の元のほうは、
http://n-slow-life.sakura.ne.jp/main.htm
です。

Comments

[Noripyon]

すみません、こういう質問は初めての利用で、どう質問内容を書けばよいのかよく解っていません ="=;;

Answer 1

jsを拝見したところ、$main = $('main')は$main = $('.main')の間違いだと思います。
現状ではmainというタグを取得しようとしています。
mainクラスの要素を取得させるには$('.main')となります。

上記の対応を行うと、スクロールバーをマウスでドラッグ操作した場合にチラつきが解消されました。
($mainに対するcss指定$main.css('margin-top', navHeight)が効くようになるので)

しかし、マウスホイールでのスクロール時、IEでヘッダー部分のチラつきを確認しました。
この問題に対応するにはヘッダーを動的にfixedにしたりしなかったり、という根本的な部分を改める必要があるように思えましたので、別の策を提案します。

jsは使いません。
nav要素に対してis-fixedクラスをhtmlに固定で付け加えて、

<nav class="is-fixed">

CSSにmargin-topではなく、padding-topでヘッダ分の空きを作れば、

.main { padding-top:131px; }

jsで切り替える必要はなく、希望の動作になるかと思います。

IE以外のモダンブラウザならばposition:stickyという都合のいい便利な固定方法もありますが、
ヘッダの固定だけならば、ただのfiexdで間に合うので利用しませんでした。

Comments

[Noripyon]

仰る通りでした ^ ^;;
わざわざ js で実装する必要ありませんでした (汗)
html の nav タグと css の (.main) padding : の top を調整をすればよいだけでした !
ネットで検索しているとどれもこれも js を使うようなので、深く考え込んでしまいました (汗)

[ViiiiiN]

ちょっとした質問なんですが、
> margin-topではなく、padding-topでヘッダ分の空きを作れば
ここであえてpaddingを選択したのはなんででしょう？後学のために教えてもらえると嬉しいです。

[so87]

margin-topだとmainの背景が透過されてしまい、本件のようなヘッダの透過部分と重なっている場合にbodyの背景が丸見えになるためです。paddingならmainの余白として処理されるので、mainの背景が隙間なく上端まで配置されます。

Answer 2

menu.jsの3行目が原因っぽいですね。

$main = $('main')
↓
$main = $('.main')

Comments

[Noripyon]

ありがとうございます !
すみません… ! 修正しましたが、変わりませんでした…

[ysnr]

キャッシュが残っていませんか？
直ってますよ。

Answer 3

どうしてJSでやろうとしているんでしょう？
見る限りnavの高さは固定ですから、最初からfixedをかけておいて、navかmainにマージンをかけるなどでどうにかできると思いますが･･･

Answer 4

リサイズ時に変数の値を取り直せばいいと思いますが、ずっとfixedではだめなのでしょうか？ あるいはsticky

Comments

[ViiiiiN]

これとても思った

[Noripyon]

皆様、本当にありがとうございます ! 自分はこんなに回り道をして実装していたなんて恥ずかしい限りです ^ ^;

Answer 5

ありがとうございます !
こんなに早く解決するとは思っていませんでした !

html :
http://n-slow-life.sakura.ne.jp/main_test.htm
http://n-slow-life.sakura.ne.jp/main_test_backup.htm
変更個所 → nav タグに class 名を付ける。(is-fixed)

css :
http://n-slow-life.sakura.ne.jp/css/norippy_style_white_test.css
http://n-slow-life.sakura.ne.jp/css/norippy_style_white_test_backup.css
変更個所 → div.main の margin padding の top 値を増やしました。

ヘッダー固定用の js は削除しました。

初めて利用しましたが、こんなに早く解決するなんて、すごく嬉しいです !
助かりました !