Как сделать div (меню) фиксированным положением после прокрутки?

Question

Я создаю тему для веб-сайта, и мне дали разрешение играть с файлами HTML. Дело в том, что я просто ознакомлен с CSS и HTML, но я полный noob, когда речь заходит о Javascript, JQuery и т. Д., И, к сожалению, мне кажется, что мне нужны эти, чтобы добавить некоторые функции, которые я хочу.

Я хотел бы меню, которое работает как этот: https://www.planetside2.com/news

HTML, в основном это:

<div id="wrap"> 
<div id="page-header"> 
    <div class="headerbar"> 
</div> 
</div> 

И много вещей внутри, но я надеюсь, что контейнеры достаточно

Это CSS:

#wrap { 
    margin: 0 auto; 
    width: 1024px; 
} 

.headerbar { 
    background: url("{T_THEME_PATH}/images/headerbarbg.png") no-repeat ; 
    background-position: center; 
    width: 1054px; 
    margin:0 -15px; 
    margin-top:3px; 
    height: 120px; 
    position: relative; 
    padding-top: 70px; 
} 

Я проверил несколько других но, как я уже сказал, я полный noob при написании сценариев, и когда я пытаюсь применить такие сценарии к теме, они не работают, скорее всего, потому что есть некоторые вещи, которые я должен изменить, знать (кроме классов и идентификаторов, конечно).

Я надеюсь, что кто-то может мне помочь.

Answer 1

Прежде всего, вам нужно обнаружить прокрутки и изменения размеров окна

$(document).ready(function(){ 

    $(window).on("scroll resize", function(e){ 

     var elem = $(".headerbar"); 

     // check if your header is visible by subtracting 
     // the top offset of your div from the scrolltop distance 
     if ((elem.offset().top - $(window).scrollTop()) <= 0 && elem.css("position") !== "fixed") { 
      console.log("not visible"); 
      elem.css({ 
       position:"fixed", 
       "z-index":"9999", 
       top:"0px" 
      }); 
     // check if your header height is greater or equal to the scrolltop distance 
     } else if (elem.height() >= $(window).scrollTop()) { 
      console.log("visible"); 
      elem.css({ 
       position:"relative" 
      }); 
     } 

    }); 

}) 

И вот простая демонстрация: JSFIDDLE

Answer 2

Некоторая вещь, которую я сделал ранее в скрипке, просто проверит этот вариант, поможет вам получить царапину.

$(document).ready(function() { 
    var top_fixed; 
    if ($('#header-con').length > 0) 
    { 
     top_fixed = $('#header-con').offset().top; 
    } 
    $(window).scroll(function() { 
     if ($('#header-con').length > 0) 
     { 
      $('#header-con').toggleClass('fixed', $(window).scrollTop() > top_fixed); 

     } 
    }); 
}); 

DEMO

Answer 3

Этот короткий код JQuery является то, что вам нужно. Протестировано и работало на веб-сайте, который я разработал в последнее время.

$(window).scroll(function() { 
    if($(window).scrollTop() != 0) { 
     $('#fixed-menu-top').css('position', 'fixed').fadeIn(); 
    } else { 
     $('#fixed-menu-top').css('position', 'absolute').fadeOut(); 
    } 
}); 

Просто редактировать ids на ваш бывший #fixed-menu-top к #wrap или любой ids в ypur размечать

See website