Как сделать заголовок над навигационной панелью?

-6

Я пытаюсь создать панель навигации с надписью над ней. Я хочу, чтобы это было так, что навигационная панель будет придерживаться, когда она достигнет вершины экрана (что я уже разработал сам), но что-то выше этого не будет придерживаться (прокрутит экран так, как обычно). ОЧЕНЬ ХОРОШИЙ ПРИМЕР ЧТО Я ТЫ ПЫТАЮТСЯ Happy Cog. Идите туда и прокрутите вниз до тех пор, пока заголовок не исчезнет, но панель навигации останется видимой и появится в верхней части окна браузера. Это то, что я хочу: заголовок помещается над панелью навигации и исчезает при прокрутке, но панель навигации остается в верхней части браузера. Я хочу убедиться, что он прокручивается и работает так же гладко, как и их, - не прыгайте и не прыгайте в верхнюю часть окна. Как разместить контент над панелью навигации и сделать его там, где он не будет вставляться, когда это меню навигации?Как сделать заголовок над навигационной панелью?

Я ДЕЙСТВИТЕЛЬНО ОКАЗЫВАЮ ЛЮБЛЮ ПОМОЩИ ВАМ ПАРУ МОЖЕТ БЫТЬ! БОЛЬШОЕ СПАСИБО ЗАРАНЕЕ!

МОЙ HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Testing</title> 
<link href="style.css" rel="stylesheet" type="text/css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="script.js"></script> 
</head> 
<body> 
<header role="banner" id="top"> 
<div id="navbar" class="banner"> 
<div id="header-text"> 
<h1> 
<strong id="top-title"> 
Atlas Land Office (text will change) 
</strong> 
</h1> 
<p id="slogan"> 
Keeping lands fresh. 
</p> 
</div> 
<div id="menu"> 
<ul role="navigation" class="banner"> 
<li> 
<a href="#home">Home</a> 
</li> 
<li> 
<a href="#land">Land Surveying</a> 
</li> 
<li id="nav-space-left"> 
<a href="#civil">Civil Engineering</a> 
</li> 
<li id="nav-home"> 
<a href="#top" title="Back to top"> 
<img src="#logo" alt="Atlas Land Office" /> 
</a> 
</li> 
<li> 
<a href="#planning">Land Planning</a> 
</li> 
<li> 
<a href="#company">Company</a> 
</li> 
<li> 
<a href="#careers">Careers</a> 
</li> 
</ul> 
</div> 
</div> 
</header> 
</body> 
</html>

Мой CSS (что я до этого момента - нет, где рядом законченный):

body { 
height: 3000px; 
top: 0; 
position: relative; 
} 

#navbar { 
position: relative; 
width: 1329px; 
height: 44px; 
background: #CCC; 
margin-left:-8px; /* Connects the navigation menu to the left "wall" */ 
margin-top:-8px; 
top: 100px; 
padding-left:10px; 
padding-right:10px; 
}

Моего JQuery:

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

источник

2013-04-28 Joshua Huff

Пожалуйста, воздержитесь от использования всех заглавных. Stack предоставляет теги Markdown для подчеркивания и жирного текста, если вам это нужно. –

Я изменил ваш код Немного, и он отлично работает. испытаны в Chrome

HTML

<body> 
<header role="banner" id="top"> 
<div id="header-text"> 
    <h1><strong id="top-title">Atlas Land Office (text will change)</strong></h1> 
    <p id="slogan">Keeping lands fresh.</p> 
</div> 

<div id="menu"> 
    <ul role="navigation" class="banner"> 
      <li><a href="#home">Home</a> </li> 
      <li><a href="#land">Land Surveying</a></li> 
      <li id="nav-space-left"><a href="#civil">Civil Engineering</a></li> 
      <li id="nav-home"><a href="#top" title="Back to top"><img src="#logo" alt="Atlas Land Office"></a></li> 
      <li><a href="#planning">Land Planning</a></li> 
      <li><a href="#company">Company</a></li> 
      <li><a href="#careers">Careers</a></li> 
    </ul> 
    </div> 
</header> 
</body>

CSS

body { 
height: 3000px; 
top: 0; 
position: relative; 
    } 
#header-text{ 
    height:200px; 
    border:2px solid;  
} 
#menu { 
display:block; 
    } 
#menu ul { 
width:1000px; 
background-color:#666; 
border:1px solid; 
height:30px; 
} 
#menu ul li{ 
float:left; 
padding:5px; 
list-style:none; 
} 
#menu ul li a{ 
color:white; 
text-decoration:none 
} 
.fixnav{ 
position:fixed; 
top:0; 
z-index:1000; 
}

Jquery

$(window).scroll(function() 

    {  
     if ($(window).scrollTop() > 200) 
     { 
      $("#menu").addClass("fixnav"); 
     } 
     else if ($(window).scrollTop() < 200) 
     { 
      $("#menu").removeClass("fixnav"); 
     } 
    });

источник

2013-04-28 17:49:40

Большое спасибо за помощь! Я очень ценю это! Я собираюсь перебирать и сравнивать разные коды, чтобы посмотреть, что было сделано. :) –

отметьте ответ, если он поможет –

Как сделать заголовок над навигационной панелью?

ответ

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