Блог

Вот пример скрипки js. Панель навигации находится прямо под разделом с надписью «Hello World», а затем содержимое находится под этой панелью навигации. Есть ли способ при прокрутке вниз, чтобы увидеть содержимое, как только панель навигации достигнет верхней части окна, сохранить ее там? Таким образом, она остается фиксированной на вершине, как только достигает вершины. Независимо от того, как далеко вы прокручиваете страницу вниз, она не будет прокручиваться со страницы, но закрепится на вершине, как только она туда попадет. Любая помощь? Большое спасибо!

jsfiddle: http://jsfiddle.net/Ptx4e /

Вот css для скрипки js:

 #head{
   width:100%;
   height:200px;
}

h1{
    text-align:center;
    padding-top:70px;
}

nav{
    background-color:black;
    overflow:hidden;
    width:100%;
}

nav ul{
    color:white;
    list-style:none;
    text-align:center;
    margin:0;
}

nav ul li{
    display:inline-block;
    padding:1% 6%;
}
nav ul li:hover{
    background-color:tomato;
}
  

С помощью небольшого jquery вы можете получить липкий заголовок. проверьте ДЕМОНСТРАЦИЮ.

Вот код jquery.

   $(window).scroll(function () {

    if ($(window).scrollTop() > 280) {
      $('#nav_bar').addClass('navbar-fixed');
    }
    if ($(window).scrollTop() < 281) {
      $('#nav_bar').removeClass('navbar-fixed');
    }
  });