私は粘着性メニューバーを持つウェブサイトを設計しています。私は、ページをコンテンツエリアに貼り付けようとしているときに、読み込まれたり、メニューバーのどこかをクリックしたりして頂点にジャンプし続けます。リロード時にページを一番上に移動させない
-4
A
答えて
0
私は皮膚この猫が、リンクにはいくつかの方法があります確信しているの一部にユーザーをスクロールするようにあなたのリンク内のアンカー(#)とIDを使用して
ページ要素IDを使用すると、ユーザーをどこに戻すのに役立ちますか?
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
background-color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header">
Header
</div>
<div class="nav">
<a href="#lastParagraph">Bottom Paragraph</a>
<a href="#nearTop">Near Top</a>
<a href="http://mysitesomewhere.com/index.html#idNearTheBottom">somewhere else</a>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget nunc nec magna sollicitudin consequat. Nunc ornare ut leo ac aliquam. Vivamus hendrerit cursus lacinia. Mauris sagittis leo at nunc scelerisque molestie. Aliquam condimentum ante
urna, a ullamcorper sapien pulvinar at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nec elit sed orci interdum varius at nec mi. Phasellus tempus vulputate purus in mollis. Nulla facilisi. Curabitur
mauris magna, laoreet at orci semper, tristique blandit massa. Etiam eleifend ornare tellus tempus accumsan. Nunc mollis nisl sit amet enim iaculis, in placerat felis porta.</p>
<p id="nearTop">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget nunc nec magna sollicitudin consequat. Nunc ornare ut leo ac aliquam. Vivamus hendrerit cursus lacinia. Mauris sagittis leo at nunc scelerisque molestie. Aliquam condimentum ante
urna, a ullamcorper sapien pulvinar at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nec elit sed orci interdum varius at nec mi. Phasellus tempus vulputate purus in mollis. Nulla facilisi. Curabitur
mauris magna, laoreet at orci semper, tristique blandit massa. Etiam eleifend ornare tellus tempus accumsan. Nunc mollis nisl sit amet enim iaculis, in placerat felis porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget nunc nec magna sollicitudin consequat. Nunc ornare ut leo ac aliquam. Vivamus hendrerit cursus lacinia. Mauris sagittis leo at nunc scelerisque molestie. Aliquam condimentum ante
urna, a ullamcorper sapien pulvinar at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nec elit sed orci interdum varius at nec mi. Phasellus tempus vulputate purus in mollis. Nulla facilisi. Curabitur
mauris magna, laoreet at orci semper, tristique blandit massa. Etiam eleifend ornare tellus tempus accumsan. Nunc mollis nisl sit amet enim iaculis, in placerat felis porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget nunc nec magna sollicitudin consequat. Nunc ornare ut leo ac aliquam. Vivamus hendrerit cursus lacinia. Mauris sagittis leo at nunc scelerisque molestie. Aliquam condimentum ante
urna, a ullamcorper sapien pulvinar at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nec elit sed orci interdum varius at nec mi. Phasellus tempus vulputate purus in mollis. Nulla facilisi. Curabitur
mauris magna, laoreet at orci semper, tristique blandit massa. Etiam eleifend ornare tellus tempus accumsan. Nunc mollis nisl sit amet enim iaculis, in placerat felis porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget nunc nec magna sollicitudin consequat. Nunc ornare ut leo ac aliquam. Vivamus hendrerit cursus lacinia. Mauris sagittis leo at nunc scelerisque molestie. Aliquam condimentum ante
urna, a ullamcorper sapien pulvinar at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nec elit sed orci interdum varius at nec mi. Phasellus tempus vulputate purus in mollis. Nulla facilisi. Curabitur
mauris magna, laoreet at orci semper, tristique blandit massa. Etiam eleifend ornare tellus tempus accumsan. Nunc mollis nisl sit amet enim iaculis, in placerat felis porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget nunc nec magna sollicitudin consequat. Nunc ornare ut leo ac aliquam. Vivamus hendrerit cursus lacinia. Mauris sagittis leo at nunc scelerisque molestie. Aliquam condimentum ante
urna, a ullamcorper sapien pulvinar at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nec elit sed orci interdum varius at nec mi. Phasellus tempus vulputate purus in mollis. Nulla facilisi. Curabitur
mauris magna, laoreet at orci semper, tristique blandit massa. Etiam eleifend ornare tellus tempus accumsan. Nunc mollis nisl sit amet enim iaculis, in placerat felis porta.</p>
<p id="lastParagraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget nunc nec magna sollicitudin consequat. Nunc ornare ut leo ac aliquam. Vivamus hendrerit cursus lacinia. Mauris sagittis leo at nunc scelerisque molestie. Aliquam condimentum ante
urna, a ullamcorper sapien pulvinar at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean nec elit sed orci interdum varius at nec mi. Phasellus tempus vulputate purus in mollis. Nulla facilisi. Curabitur
mauris magna, laoreet at orci semper, tristique blandit massa. Etiam eleifend ornare tellus tempus accumsan. Nunc mollis nisl sit amet enim iaculis, in placerat felis porta.</p>
</div>
</div>
1
いくつかのヒントは、次のようになります。
- は、単一ページのアプリケーションを実行して、ページをリロード回避 (ジャバスクリプトで、基本的には、新しいコンテンツを取得し、リロードせずにページに挿入します)
いくつかのjavascriptを使用して、ユーザーがページ上のどこにいるかを把握し、その情報(y位置)をメニューバーのリンクに配置します。次に、ロード時に別のJSスクリプトがその情報を取得してスクロールします。しかし、それはちょっと汚いです。ブラウザが自動的にページ
関連する問題
- 1. キャラクターをキャンバス上に移動するが画面上に移動させない
- 2. スクロールを一番上に移動しないようにする - 問題
- 3. リロード時にページをアクティブにしないでください
- 4. Google Chromeにリロード時に空白のページを表示させる
- 5. ページ移動時にJquerymobileのフッターがページの先頭に移動
- 6. jQueryを使用してページの一番下に移動 - アニメーションなし
- 7. オーナードックのアプリケーションバーが一番上にある間にダイアログボックスが一番上にない
- 8. ページ移動時に移動しない画像を修正する方法
- 9. レスポンシブデザインの一番左の列に移動
- 10. Woocommerceの「マイアカウントナビゲーション」をページ上部に移動
- 11. スワイプ時にタブインジケーターが移動せず選択項目上に移動する
- 12. ドロップダウンメニューが一番上にない
- 13. Visual Basic.NETで画面の一番上に移動した後、一番下に戻るようにシェイプを移動して戻す方法はありますか?
- 14. ページのリロード時にランダムなコンテンツがループしない
- 15. divをページの一番上に達するとページを下にスクロールさせる方法は?
- 16. レスポンシブな2列が一番上に並んでいません
- 17. AndroidハニカムOSでは、ステータスバーを一番上に移動できますか?
- 18. iframeから一番上のウィンドウをリロードする方法は?
- 19. テーブルデータが動的にリロードされない
- 20. AJAX:リロードせずにページ上のテキストエリアを更新
- 21. Bx Sliderは、ページ上の他の要素を(Chrome上で)移動させます。
- 22. データのフィルタリング時にページ番号が変更されない
- 23. C#Comboboxリストの一番下に項目を移動してください
- 24. 右と左にスワイプして角を使ってページ上を4番目に移動する簡単なコード
- 25. 垂直CCScrollViewを一番上に整列させる方法は?
- 26. 離れて移動したときにページをリロードしないようにするには
- 27. IE8リロード時に一貫性のないレンダリング
- 28. NestedScrollViewが自動的に一番上にスクロールしないようにする
- 29. ボディーの内容を一定量以上移動させますが、反対側には移動しないでください。
- 30. スクロール中に移動要素を移動させないようにする
あなたはいくつかのコードを持っていますか?あなたはすでに試したことを見せてもらえますか? –