2017-06-28 8 views
0

私はウェブサイトを作っていて、画面の上部にあるナビゲーションバーが必要です。私はこれをうまくやることができますが、上にスクロールするとヘッダーの上に移動します。ページ上部の前にユーザーとのスクロールを止めるにはどうすればよいですか?私は無数のチュートリアルを見てきましたが、うまくいきません。 JavaScriptを有効にするには、JavaScriptを有効にする必要があります。また、ユーザーがスクロールダウンしたときにどのように再作成するのですか?ウェブページヘッダーをカバーするトップバー

+3

将来参照するために、これまでに試したことがあり、質問したときに動作しないコードを含める必要があります。[よくある質問](https://stackoverflow.com/help/how-to-ask) – danwellman

答えて

1

はい、これを処理するにはJavaScriptが必要です。複雑すぎるわけではありませんが、基本的にはwindowscrollイベントのイベントハンドラを追加する必要があります。ハンドラの内部でwindowscrollTopを確認して、どれだけスクロールされているか確認できます。 「十分」(通常はヘッダーの高さ)にスクロールされると、ヘッダーの位置を固定に切り替えることができます。

優れたCSS Tricksにはデモが表示されていますが、これに役立つチュートリアルやプラグインが多数あります。

+0

いいえ誰かがコードを望むなら私はそれを投稿することができます – user8221260

1

はい、ダンウェルマンは言ったように、あなたはjsが必要です。 私は自分のウェブページで使用した小さなコードを持っています。

// Highlight the top nav as scrolling occurs 
$('body').scrollspy({ 
    target: '.navbar-fixed-top', 
    offset: 51 
}); 

「scrolling-nav.js」などのファイルが必要です。そしてあなたのHTMLでは、それを呼び出すことを忘れないでください。

// In the end or in the beggining you call your js file 
<script src="...(filepath)/scrolling-nav.js"></script> 

さらに多くの魅力的なスニペットがあります。これは、実際には、「51」のオフセットの後にNavbarを固定したままにすることです。メニューボタンを選択した後、スムージングされた動きをWebページセクションに追加することもできます。たとえば、1ページのWebサイトを持っている場合。これはまたjsでしょう。

幸運。 :)

+0

ありがとう – user8221260

関連する問題