Technical
公開日: 2025年04月1日
公開日: 2025年04月1日
【CSS or jQuery】追従ヘッダーを（position:fixed）作るとページ内リンクがズレる件。
追従ヘッダーを絶対固定で（position:fixed）配置した上でページ内リンクを設定すると、追従ヘッダーの下に隠れちゃうやつの解決方法。いくつか方法はあるのでご自身のサイトに合わせて都合の良いやり方を選択していただけたらと思います。
一番簡単でシンプルな方法(CSS)
html { scroll-padding-top: 100px; /** 固定ヘッダの高さに合わせる **/ }これで大体問題ないかと思いますね。
次に簡単でシンプルな方法(CSS)
classname {
padding-top: 100px; /** 固定ヘッダの高さに合わせる **/
margin-top: -100px; /** 相殺する **/
}これはターゲット先の要素に背景色などが付いているとそれまで伸びてしまうので注意。
jQueryを使った方法
<script>
jQuery(function(){
var windowWidth = $(window).width();
var headerHight = 100; /** 固定ヘッダの高さに合わせる **/
jQuery('a[href^=#]').click(function() {
var speed = 1000;
var href= jQuery(this).attr("href");
var target = jQuery(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top-headerHight;
jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>これは「ターゲット先はヘッダーの高さ分引いた位置から表示してね」という命令です。
