Фиксированный Navbar под нефиксированным заголовком

Мой сайт состоит из четырех div s; чтобы они были следующими: header, navbar, main, и footer.Фиксированный Navbar под нефиксированным заголовком

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

Что происходит с кодом, который у меня есть сейчас (http://jsfiddle.net/BGLwM/), является то, что navbar придерживается вершины, но поверх заголовка. Когда я устанавливаю верхнюю вершину как высоту заголовка (размещение навигационной панели под заголовком) и прокрутка вниз, есть пробел, который широк, чем заголовок, и навигационная панель не прилипает к вершине.

Есть ли способ решить это в чистом CSS? Я НЕ использую Bootsrap, и хотя у меня нет проблем с использованием JS или JQuery, у меня нет опыта использования.

источник

2014-02-02 ohitsanazn

Я думаю, что с чистым css это невозможно, но вы можете использовать jQuery, чтобы исправить это. Http://jsfiddle.net/pranavcbalan/BGLwM/4/ –

@PranavCBalan Я полагаю, это должно будет сделать; благодаря! – ohitsanazn

http://jsfiddle.net/chou_one/BGLwM/6/

#navbar { 
    /* BASE CODE */ 
    position: fixed; 
    margin-top: 50px;  
    z-index: 10; 
    width: 960px; 
    height: 10px; 
    /* STYLING */ 
    background: yellow; 
}

Я сделал некоторые отводом вокруг и получил заголовок и Navbar, чтобы остаться на своем месте. Разве это то, что вам нужно? Дайте мне знать, и мы можем его настроить.

вы можете изменить настройки высоты я просто сделал их меньше для тестирования

источник

2014-02-02 02:21:40

Я хотел, чтобы nav придерживался верха; Комментарий Pranav работает для меня, несмотря на jQuery - Спасибо за попытку! – ohitsanazn

Этот вопрос был задан ранее. Я отвечу (почти дословно) ответ другого пользователя здесь (от How can I make a div stick to the top of the screen once it's been scrolled to?). Это не чисто CSS-это смесь также javascrpt и jquery. Но не волнуйся. вот видео с YouTube, которое поможет вам реализовать jquery на вашей странице. http://www.youtube.com/watch?v=tcRHGmFnSm8

function moveScroller() { 
    var move = function() { 
     var st = $(window).scrollTop(); 
     var ot = $("#scroller-anchor").offset().top; 
     var s = $("#scroller"); 
     if(st > ot) { 
      s.css({ 
       position: "fixed", 
       top: "0px" 
      }); 
     } else { 
      if(st <= ot) { 
       s.css({ 
        position: "relative", 
        top: "" 
       }); 
      } 
     } 
    }; 
    $(window).scroll(move); 
    move(); 
} 




<div id="sidebar" style="width:270px;"> 
    <div id="scroller-anchor"></div> 
    <div id="scroller" style="margin-top:10px; width:270px"> 
    Scroller Scroller Scroller 
    </div> 
</div> 

<script type="text/javascript"> 
    $(function() { 
    moveScroller(); 
    }); 
</script>

И простой live demo.

Зарождающаяся альтернатива, свободная от скриптов, является позицией: липкой, которая поддерживается в Chrome Canary и WebKit в ночное время. См. article on HTML5Rocks и this demo.

источник

2014-02-02 02:41:12 user3246890

Для того чтобы получить липкую навигационную панель для прокрутки только с HTML и CSS, вам нужно сделать 2 navbars, один сверху и один снизу.
Тот, что сверху, является «липким» и сидит за заголовком, а другой просто помещен под заголовком, как обычно, и не является липким.

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#sticky { 
 
    z-index: -1; 
 
    position: fixed; 
 
    padding: 1em; 
 
    width: 100%; 
 
    background: #000; 
 
    color: #fff; 
 
} 
 
header { 
 
    padding: 50px; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    background: #4b3621; 
 
    color: #fff; 
 
} 
 
nav { 
 
    margin-bottom: 2000px; 
 
    padding: 1em; 
 
    background: #000; 
 
    color: #fff; 
 
}

<nav id="sticky"> 
 
    <p>Sticky Navbar</p> 
 
</nav> 
 
<header> 
 
    <h1>Header</h1> 
 
</header> 
 
<nav> 
 
    <p>Nonsticky Navbar</p> 
 
</nav>

У меня была такая же проблема сегодня, так что я искал Google и пришел с пустыми руками. Тогда это ударило меня. Поэтому я искал аналогичный вопрос, чтобы ответить на него (это мой первый ответ).
Надеюсь, это поможет.

источник

2014-10-30 00:58:18

Фиксированный Navbar под нефиксированным заголовком

ответ

Смежные вопросы