3

私は花屋向けのサイトを開発しており、現在テストと改良を行っています。長年の問題は、ユーザーがページをスクロールしたときにページの上部に固執することになっているナビゲーションバーにあります。これは長いページでは問題なく動作しますが、画面の解像度が小さく、ページのスクロールの終わりを過ぎてナビが「こぼれる」短いページでは動作しません - jQuery と位置を使用してナビが固定されている場合: ページが次の場所にジャンプするのを修正しましたユーザーがスクロールすると一番上に表示されます。(例については、http://efbeta.nzrailphotos.co.nz/products/teddies/を参照してください)。次のいずれかになるようにこれを修正するにはどうすればよいですか。

  • ページ コンテンツがナビゲーション バーよりも短い場合、ナビゲーション バーが修正されない
  • 短いページでのナビゲーションバーのスクロール
function sticky_relocate()
{
  var window_top = $(window).scrollTop();
  var div_top = $('#sticky-anchor').offset().top;
  if (window_top > div_top)
    $('nav').addClass('stick')
  else
    $('nav').removeClass('stick'); 
}
$(function()
{
  $(window).scroll(sticky_relocate);
  sticky_relocate();
});
4

2 に答える 2

1

StickyJSと呼ばれるJqueryプラグインがあなたを助けることができると思います：http ：//stickyjs.com

于 2012-12-16T21:53:22.610 に答える
0

最小ページ高さは、少なくとも完全に拡張されたナビゲーションバーと同じ高さである必要があります。#containerスタイルをmin-heightに設定してみてください。

于 2012-12-16T21:56:54.613 に答える