navbarをトップに固定する方法

Question

私はちょうど1ページのウェブサイトを作成し、ナビゲーションバーを固定したいと思っています。現時点では画像が次のようになります：

これを行うには、ロゴを左に移動し、右に移動し、位置を絶対に設定して右と下をゼロに設定します。ここで

私のHTMLとCSSのいくつか：

<div class="navigation"> 
    <nav id="site-navigation" class="main-navigation" role="navigation"> 
     <div class="menu-menu-1-container"> 
      <ul id="primary-menu" class="menu"> 
       <li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item menu-item-55"><a href="http://localhost/scentology/">Home</a></li> 
       <li id="menu-item-107" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-107"><a href="#about">About</a></li> 
       <li id="menu-item-144" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-144"><a href="#products-and-services">Products &#038; Services</a></li> 
       <li id="menu-item-142" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-142"><a href="#scent-marketing">Scent Marketing</a></li> 
       <li id="menu-item-145" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-145"><a href="#clients-and-industries">Clients &#038; Industries</a></li> 
       <li id="menu-item-143" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-143"><a href="#contact">Contact Us</a></li> 
      </ul> 
     </div>  
    </nav> 
</div> 

.navigation{ 
    height:40px; line-height:40px; 
} 
nav#site-navigation { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
} 

私はまだスクリプトについて今はあまりないが、このスニペットを調整しようとしていた。

<script> 
// Create a clone of the menu, right next to original. 
$('.navigation').addClass('original').clone().insertAfter('.navigation').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide(); 
scrollIntervalID = setInterval(stickIt, 10); 
function stickIt() { 
    var orgElementPos = $('.original').offset(); 
    orgElementTop = orgElementPos.top;    
    if ($(window).scrollTop() >= (orgElementTop)) { 
     // scrolled past the original position; now only show the cloned, sticky element. 
     // Cloned element should always have same left position and width as original element.  
     orgElement = $('.original'); 
     coordsOrgElement = orgElement.offset(); 
     leftOrgElement = coordsOrgElement.left; 
     widthOrgElement = orgElement.css('width'); 
     $('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show(); 
     $('.original').css('visibility','hidden'); 
    } else { 
     // not scrolled past the menu; only show the original menu. 
     $('.cloned').hide(); 
     $('.original').css('visibility','visible'); 
    } 
} 
</script> 

メニューが修正されましたが、問題は、私が想定している位置特性のために正しく見ることができないことです。私はそれを見るために底値を変えなければなりませんでした。それは私が一番下にスクロールするときにのみ機能します。上にスクロールしようとすると、メニューは表示されません。

スクロールアップしたときにスクロールして元の位置に戻すにはどうすればよいですか？

Answer 1

てみてください可能な限り短くし、物事をシンプルに保つためにスクロールしても上にあります。

スクロール位置がセットオフになっている場合は、単にチェックところ、以下のjqueryのコードでスクリプトあなたを置き換えます

(function($){  
    var navOffset = jQuery("nav").offset().top; 
    jQuery(window).scroll(function() { 
     var scrollPos = jQuery(window).scrollTop(); 
     if (scrollPos >= navOffset) { 
      jQuery("nav").addClass("fixed"); 
     } else { 
      jQuery("nav").removeClass("fixed"); 
     } 
    }); 
})(jQuery); 

あなたはtは.fixedクラスに応じなければなりません適用決めるどのようなスタイリング。固定クラスは、上にスクロールするたびに削除されることに注意してください。だからここ

があなたのCSSです：あなたの内容によっては

.fixed{ 
    position:fixed !important; 
    z-index: 9999; 
    top: 4%; 
    width: 100%; 
    text-align: center; 
} 

、私はあなただけそれは完全にコードを働くあなたのトップのパーセンテージ

Answer 2

あなたのCSSに以下を追加します。

： contentのCSS

<div id='content'> 
<!--Put your main stuff here!--> 
</div> 

：

.navigation{ 
height:40px; 
line-height:40px; 
position:fixed; 

そして、divの中にあなたのナビゲーションクラスの後に要素を入れてはcontent
例と呼ばれます

#content { 
padding-top: someValueInPixel; 
} 

ナビゲーションの高さを確認し、someValueInPixelをその値に置き換えます。私の解決策では

あなたが一番上にナビゲーションバーを保持するためにはJavaScriptを必要としない、あなたはnav#site-navigation CSSを必要としない

なぜ位置：固定;
w3schools.comは言う：

意味

The element is positioned relative to the browser window 

、あなたの要素はあなたが