Как сделать навигационную панель исправленной наверху

Question

Я только что создал сайт с одной страницей и хочу, чтобы мой навигатор был установлен. На данный момент это выглядит так: на картинке показано:

Для этого я разместил логотип слева, навигатор вправо и установил абсолютное положение, чтобы можно было установить нуль вправо и вправо.

Вот мой 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); 

Независимо стиля вы решите применить т должно быть в соответствии с .fixed класса. Помните, что фиксированный класс будет удален при каждом прокрутке вверх.

Так вот ваш CSS:

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

В зависимости от вашего содержания, я думаю, вы просто нужно будет играть с вашим топ проценты

Answer 2

добавить на CSS следующее:

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

И положил элементы после навигационному класса в DIV называется content
Пример:

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

CSS-код для content:

#content { 
padding-top: someValueInPixel; 
} 

проверьте высоту вашей навигации и замените someValueInPixel на это значение.

С моим решением вам не нужно JavaScript, чтобы держать вашу Navbar в верхней части и не нужен nav#site-navigation CSS

Почему позиция: фиксированная;
w3schools.com говорит:

The element is positioned relative to the browser window 

Это означает, что ваш элемент находится на вершине, даже когда вы прокручивать