ホームページ >ウェブフロントエンド >htmlチュートリアル >アンカーポイント使用時のトップフローティングDIVの高さ占有問題の解決方法_html/css_WEB-ITnose
アンカーポイント使用時のトップフローティングDIVの高さ占有問題の解決方法_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:23:191241ブラウズ
以下のエフェクトはリンクをクリックするとアンカーポイントに切り替わりますが、上部に一定の高さのフローティングDIVがあるため、クリック後は下のDIVがブロックされて該当の高さでは見えなくなりますがどうでしょうか。この問題は解決しますか？長い間悩んでいました、助けてください、よろしくお願いします。スムーズなスクロールができれば良いですね
さらに、スムーズなスクロール効果を追加する必要がある場合は、クリックして
オンライン デモンストレーションの結果
またはオンライン デモ コード を表示できます
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script language=javascript src="http://www.0551jia.cn/js/jquery1.42.min.js"></script><title>测试</title><style type="text/css">* {color:#fff;}.clear { clear:both; height:0; line-height:0px; font-size:0;}#ding{position:fixed;z-index:100; background-color:#036; top:0;left:0;_position:absolute;_top:expression(documentElement.scrollTop + 0 + "px");_left:expression(documentElement.scrollLeft + 0 + "px");} #ding{width:100%;overflow:hidden; height:56px; text-align:center}.logo { background-color:#eee; height:70px; border-bottom:#d8d8d8 1px solid; margin-bottom:3px;}.navbox{ width:1100px; margin:0 auto; z-index:998;}.navboxfix{ position:fixed; left:50%; margin-left:-550px; width:1100px;top:56px; _position:relative;}.navbox {height:36px; line-height:36px; background-color:#484441; color:#FFF}.navbox dd a{display:block;width:134px; float:left; text-align:center; color:#fff}.k {height:800px; background-color:#069;}.b {height:800px; background-color:#393}</style></head><body><div id="ding"> 固定的顶 </div><div class="clear" style="height:56px;"></div><div class="logo wk cent"> 中间</div><div class="navbox"> <dl style="position:inherit"> <dd><a href="#kk1">这是1</a></dd> <dd><a href="#kk2">这是2</a></dd> <dd><a href="#kk3">这是3</a></dd> <dd><a href="#kk4">这是4</a></dd> <dd><a href="#kk5">这是5</a></dd> </dl></div><div class="k"><a name="kk1" id="kk1"></a>这是一</div><div class="b"><a name="kk2" id="kk2"></a>这是二</div><div class="k"><a name="kk3" id="kk3"></a>这是三</div><div class="b"><a name="kk4" id="kk4"></a>这是四</div><div class="k"><a name="kk5" id="kk5"></a>这是五</div><script type="text/javascript">var sft=$(".navbox").offset().top-56; //顶部固定DIV function shownav(){ var s_t= document.documentElement.scrollTop || document.body.scrollTop; if(s_t>sft){ $(".navbox").addClass("navboxfix") } else{ $(".navbox").removeClass("navboxfix") } }window.onscroll=shownav;</script></body></html>
ディスカッションへの返信(解決策)
参考:
HTMLアンカーをオフセットして固定ヘッダーに合わせて調整する
JQuery Position:Fixed 'NAVBAR' by Screeningページ
give 純粋な CSS で実装された次のスタイルをアンカー ポイントに追加します。
a.anchor{ display: block; position: relative; top: -92px; visibility: hidden;} さらに、スムーズなスクロール効果を追加する必要がある場合は、クリックして
オンライン デモンストレーションの結果
またはオンライン デモ コード を表示できます
後で使用するために実際の効果のアドレスを保存してください
ありがとうございました熱心なご返事をいただきました！ ！ ！
参考:
HTML アンカーをオフセットして固定ヘッダーを調整する
JQuery Position:ページをスクロールすることで「NAVBAR」を固定する
純粋な CSS で実装された次のスタイルをアンカー ポイントに追加します。
すごいです
さらに、スムーズなスクロール効果を追加する必要がある場合は、クリックして
オンライン デモンストレーション結果
またはオンライン デモ コード
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。