Навигационная панель фиксированная после прокрутки?

Question

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

могу ли я сделать с позиция: относительная ?? В отличие от позиции: исправлено с помощью следующего сценария или другого лучшего способа?

$(window).scroll(function() { 
if ($(window).scrollTop() > 100) { 
    $('#header').css('top', $(window).scrollTop()); 
}}); 

вот мой fiddle!

черный цвет фона бар, застрял в верхней части страницы

Пожалуйста, помогите мне исправить это, спасибо заранее.

Answer 1

this Что вы пытаетесь получить?

window.onscroll = changePos; 

function changePos() { 
    var header = document.getElementById("header"); 
    if (window.pageYOffset > 70) { 
     header.style.position = "fixed"; 
     header.style.top = "0"; 
    } else { 
     header.style.position = ""; 
     header.style.top = ""; 
    } 
} 

---

Update: (я думаю, не уверен) вы не можете прокручивать фиксированный элемент, но вы можете абсолютно один. Итак, в приведенном ниже коде мы используем position: absolute, но заставляем его вести себя так, как будто это fixed. Теперь вы можете увидеть #header, когда вы увеличиваете масштаб и прокручиваете вниз.

window.onscroll = changePos; 

function changePos() { 
    var header = document.getElementById("header"); 
    if (window.pageYOffset > 70) { 
     header.style.position = "absolute"; 
     header.style.top = pageYOffset + "px"; 
    } else { 
     header.style.position = ""; 
     header.style.top = ""; 
    } 
} 

FIDDLE