我跟着一个stackoverflow问题来做粘性导航栏的第一部分，这里是我假装做的{JFiddle sticky navbar，我有菜单，我把所有内容放在内容类div中，我唯一的问题是，当我在页面上scrool粘性导航栏在内容后面，我希望粘性导航栏放在前面，我尝试用z-index和位置相对，但然后我所有的输入（textarea，链接）停止工作，这有点意义，我怎样才能实现我想做的事情？
这是我的完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TSIW - Um curso em inovação</title>
<link href="bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bungee+Hairline|Exo|Maven+Pro|Quicksand" rel="stylesheet">
<link href="page.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row backColor"><img alt="TSIW" class="img img-responsive" src="TSIW.jpg"></div>
<div class="row backColor">
<div id="wrapper"></div>
</div>
<div class="row menu2">
<div class="centerBlock">
<ul id="menu">
<li class="menuItem">
<a href="#aluno">Apresentação</a>
</li>
<li class="menuItem">
<a href="#PlanoEstudos">Plano de Estudos</a>
</li>
<li class="menuItem">
<a>Notícias</a>
</li>
<li class="menuItem">
<a>Projetos</a>
</li>
<li class="menuItem">
<a>Outros</a>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="row spacing2">
<h3 id="Apresentacao">Apresentação</h3><iframe allowfullscreen frameborder="0" height="315" id="aluno" name="aluno" src="https://www.youtube.com/embed/BdyPhLbCPA8" width="900"></iframe>
<div class="col-md-offset-2 col-md-8">
<p class="aluno" style="background-color:white;padding:4%;border-radius:10px">A licenciatura em Tecnologias e Sistemas de Informação para a Web é um projeto conjunto da Escola Superior de Estudos Industriais e de Gestão (ESEIG) e do Instituto Superior de Engenharia do Porto (ISEP). O curso funciona nas instalações da ESEIG, com docentes da ESEIG e do ISEP, e o grau é atribuído conjuntamente por estas duas Escolas do Instituto Politécnico do Porto. Tem por objetivo formar profissionais capazes de liderarem projetos nos domínios da conceção, desenvolvimento e gestão de sistemas de informação e de conteúdos para a Web. O Curso privilegia uma sólida formação em design para meios digitais e em tecnologias da informação, procurando formar profissionais que dominem quer a vertente mais criativa do processo produtivo, quer a vertente mais técnica ou tecnológica. O Curso procura privilegiar as tendências emergentes na área das ciências e tecnologias da informação, como a computação centrada na Web (cloud computing), segurança, interfaces gráficas e ambientes virtuais. Os licenciados deverão desenvolver as competências necessárias para se envolverem em projetos de conceção, desenvolvimento e gestão de sistemas de informação e de conteúdos para a Web, suportados nas mais diversas tecnologias e plataformas tecnológicas. O perfil do licenciado compreende as seguintes competências:</p>
<p class="foco spacing2">Competências</p>
<ul class="spacing4" id="competencias" style="background-color:white;padding-left:4%;border-radius:10px">
<li>Conceber, desenvolver e gerir sistemas de informação e produtos para a Web;</li>
<li>Demonstrar capacidade de liderança, capacidade de iniciativa e espírito empreendedor;</li>
<li>Conceber e desenvolver produtos em ambientes interativos ou 3D;</li>
<li>Desenvolver sistemas e produtos para multiplataformas;</li>
<li>Projetar e desenvolver produtos digitais de entretenimento e lazer.</li>
</ul>
<p class="foco spacing2">Saídas Profissionais</p>
<ul class="spacing4" id="Saidas" style="background-color:white;padding-left:4%;border-radius:10px">
<li>Conceção, desenvolvimento e gestão de software e produtos para a Web;</li>
<li>Desenvolvimento de produtos para dispositivos móveis;</li>
<li>Conceção e desenvolvimento de software de entretenimento e jogos;</li>
<li>Consultadoria na área de sistemas de produtos para a Web</li>
<li>Desenvolvimento de plataformas de negócio electrónico;</li>
<li>Designer Web.</li>
</ul>
</div>
</div>
<div class="row spacing2">
<h3 id="PlanoEstudos">Plano de Estudos</h3>
<div class="col-md-offset-2 col-md-8" style="background-color:white;padding:2%;border-radius:10px">
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#ano1">1ºano</a>
</li>
<li>
<a data-toggle="tab" href="#ano2">2ºano</a>
</li>
<li>
<a data-toggle="tab" href="#ano3">3ºano</a>
</li>
</ul>
<div class="tab-content">
<table class="table tab-pane fade in active" id="ano1">
<thead>
<tr>
<th>Unidade Curricular</th>
<th>Tipologia</th>
<th>ECTS</th>
</tr>
</thead>
<tbody>
<tr>
<td>MatemáticaI</td>
<td>1.ºSemestre</td>
<td>7</td>
</tr>
<tr>
<td>Algoritmia e Estrutura de dados</td>
<td>1.ºSemestre</td>
<td>7</td>
</tr>
<tr>
<td>Sistemas Computacionais</td>
<td>1.ºSemestre</td>
<td>4</td>
</tr>
<tr>
<td>Tecnologias e aplicações web</td>
<td>1.ºSemestre</td>
<td>4</td>
</tr>
<tr>
<td>Fundamentos de design</td>
<td>1.ºSemestre</td>
<td>6</td>
</tr>
<tr>
<td>MatemáticaII</td>
<td>2.ºSemestre</td>
<td>6</td>
</tr>
<tr>
<td>Conceção e produção multimédia</td>
<td>2.ºSemestre</td>
<td>6</td>
</tr>
<tr>
<td>Programação orientada a objetos</td>
<td>2.ºSemestre</td>
<td>7</td>
</tr>
<tr>
<td>Design Gráfico</td>
<td>2.ºSemestre</td>
<td>5</td>
</tr>
<tr>
<td>ProjetoI</td>
<td>2.ºSemestre</td>
<td>6</td>
</tr>
</tbody>
</table>
<table class="table tab-pane fade" id="ano2">
<thead>
<tr>
<th>Unidade Curricular</th>
<th>Tipologia</th>
<th>ECTS</th>
</tr>
</thead>
<tbody>
<tr>
<td>Análise e modelação de sistemas</td>
<td>1.ºSemestre</td>
<td>6</td>
</tr>
<tr>
<td>Bases de dados</td>
<td>1.ºSemestre</td>
<td>6</td>
</tr>
<tr>
<td>Física aplicada à programação</td>
<td>1.ºSemestre</td>
<td>5</td>
</tr>
<tr>
<td>Programação webI</td>
<td>1.ºSemestre</td>
<td>7</td>
</tr>
<tr>
<td>Animação gráfica</td>
<td>1.ºSemestre</td>
<td>6</td>
</tr>
<tr>
<td>Engenharia de software</td>
<td>2.ºSemestre</td>
<td>6</td>
</tr>
<tr>
<td>Modelação e ambientes 3D</td>
<td>2.ºSemestre</td>
<td>6</td>
</tr>
<tr>
<td>Programação webII</td>
<td>2.ºSemestre</td>
<td>7</td>
</tr>
<tr>
<td>Sistemas gráficos</td>
<td>2.ºSemestre</td>
<td>5</td>
</tr>
<tr>
<td>ProjetoII</td>
<td>2.ºSemestre</td>
<td>6</td>
</tr>
</tbody>
</table>
<table class="table tab-pane fade" id="ano3">
<thead>
<tr>
<th>Unidade Curricular</th>
<th>Tipologia</th>
<th>ECTS</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sistemas cistribuidos</td>
<td>1.ºSemestre</td>
<td>7</td>
</tr>
<tr>
<td>Ergonomia cognitiva e design de interação</td>
<td>1.ºSemestre</td>
<td>5</td>
</tr>
<tr>
<td>Desenvolvimento de jogos</td>
<td>1.ºSemestre</td>
<td>6</td>
</tr>
<tr>
<td>Negócio eletrónico e segurança</td>
<td>1.ºSemestre</td>
<td>6</td>
</tr>
<tr>
<td>Gestão empresarial</td>
<td>1.ºSemestre</td>
<td>6</td>
</tr>
<tr>
<td>Técnicas avançadas de web design</td>
<td>2.ºSemestre</td>
<td>3</td>
</tr>
<tr>
<td>Inovação e empreendedorismo</td>
<td>2.ºSemestre</td>
<td>3</td>
</tr>
<tr>
<td>Programação para dispositivos móveis</td>
<td>2.ºSemestre</td>
<td>4</td>
</tr>
<tr>
<td>Projeto final/estágio</td>
<td>2.ºSemestre</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row spacing2">
<h3 id="Noticias">Notícias</h3>
<div class="carousel slide" data-ride="carousel" id="text-carousel">
<!-- Wrapper for slides -->
<div class="row">
<div class="col-xs-offset-3 col-xs-6">
<div class="carousel-inner">
<div class="item active">
<div class="carousel-content" style="background-color:white;padding:5%;border-radius:10px">
<div>
<h4 style="text-align:right;font-weight:900">Seminário Gestão de Projectos de Software</h4>
<p style="text-align:right"><b>Orador</b>: Nelson Faria</p><br>
<ul id="noti">
<li>Professional Services Director at Nonius - Hospitality Technology</li>
<li>Professional Services Director</li>
<li>Systems Engineer</li>
<li>Software Enginner</li>
</ul><br>
<p>As inscrições são gratuítas mas obrigatórias para <a href="#">mariopinto@eseig.ipp.pt</a></p>
<p>Uma organização da Licenciatura em TSIW.</p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content" style="background-color:white;padding:5%;border-radius:10px">
<div>
<h4 style="text-align:center;font-weight:900">Seminário de controlo de versões de software</h4>
<p style="text-align:right"><b>Orador</b>: Pedro Cunha, Software Engineer @ Multicert</p>
<p>Quem desenvolve software (SW) apercebe-se que nenhuma aplicação está totalmente acabada, há bugs por detetar, algoritmos a melhorar, interfaces a modificar... Atualmente é impensável desenvolver projetos de SW sem ter um sistema que controle tudo o que acontece, desde alterações de código até à própria documentação. Neste seminário, aberto a toda a comunidade da ESEIG, pretende-se introduzir os conceitos gerais dos sistemas de controlo de versões de SW mais utilizados atualmente, tendo como "case study" o Git.</p><br>
<br>
<p style="text-align:left"><b>Data</b>:Sexta-feira, 20 de maio de 2016, pelas 14h</p>
<p style="text-align:left"><b>Local</b>:Anfiteatro Joaquim Ribeiro (B101), ESEIG</p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content" style="background-color:white;padding:5%;border-radius:10px">
<div>
<h4 style="text-align:center;font-weight:900">Desenvolvimento de Jogos em Unity em 120 minutos</h4>
<p style="text-align:right"><b>Orador</b>: Alberto Simões, IPCA.</p>
<p>Neste seminário procura-se demonstrar como implementar um pequeno jogo em unity, tirando partido de diferentes tipos de funcionalidades, bem como de recursos pré-disponibilizados, com o intuito de introduzir a filosofia de desenvolvimento de jogos em unity.</p><br>
<br>
<p style="text-align:left">As inscrições são gratuítas mas obrigatórias para <a href="#">mariopinto@eseig.ipp.pt</a></p>
</div>
</div>
</div>
</div>
</div>
</div><!-- Controls --> <a class="left carousel-control" data-slide="prev" href="#text-carousel"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" data-slide="next" href="#text-carousel"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
<div class="row spacing2" id="thumbnails">
<h3 id="PlanoEstudos">Projetos</h3>
<div class="col-md-3 spacing4">
<div class="hovereffect">
<img alt="" class="img img-responsive img-thumbnail" src="thumbnails/Damas.png" style="height:170px; width:240px">
<div class="overlay">
<h2>Jogo das damas em Three.js</h2>
<p><a href="#">LINK AQUI</a></p>
</div>
</div>
</div>
<div class="col-md-3 spacing4">
<div class="hovereffect">
<img alt="" class="img img-responsive img-thumbnail" src="thumbnails/MSDiary.png" style="height:170px; width:240px">
<div class="overlay">
<h2>Plataforma de gestão de despesas</h2>
<p><a href="#">LINK AQUI</a></p>
</div>
</div>
</div>
<div class="col-md-3 spacing4">
<div class="hovereffect">
<img alt="" class="img img-responsive img-thumbnail" src="thumbnails/Crowd.png" style="height:170px; width:240px">
<div class="overlay">
<h2>Plataforma de inovação turística</h2>
<p><a href="#">LINK AQUI</a></p>
</div>
</div>
</div>
<div class="col-md-3 spacing4">
<div class="hovereffect">
<img alt="" class="img img-responsive img-thumbnail" src="thumbnails/localize.jpg" style="height:170px; width:240px">
<div class="overlay">
<h2>Plataforma de gestão de equipamentos na ESMAD</h2>
<p><a href="#">LINK AQUI</a></p>
</div>
</div>
</div>
<div class="col-md-3 spacing4">
<div class="hovereffect">
<img alt="" class="img img-responsive img-thumbnail" src="thumbnails/SmartSquare.png" style="height:170px; width:240px">
<div class="overlay">
<h2>Twitter personalizado da Esmad</h2>
<p><a href="#">LINK AQUI</a></p>
</div>
</div>
</div>
<div class="col-md-3 spacing4">
<div class="hovereffect">
<img alt="" class="img img-responsive img-thumbnail" src="thumbnails/MSDiary.png" style="height:170px; width:240px">
<div class="overlay">
<h2>Plataforma de gestão de despesas</h2>
<p><a href="#">LINK AQUI</a></p>
</div>
</div>
</div>
<div class="col-md-3 spacing4">
<div class="hovereffect">
<img alt="" class="img img-responsive img-thumbnail" src="thumbnails/Crowd.png" style="height:170px; width:240px">
<div class="overlay">
<h2>Plataforma de inovação turística</h2>
<p><a href="#">LINK AQUI</a></p>
</div>
</div>
</div>
<div class="col-md-3 spacing4">
<div class="hovereffect">
<img alt="" class="img img-responsive img-thumbnail" src="thumbnails/localize.jpg" style="height:170px; width:240px">
<div class="overlay">
<h2>Plataforma de gestão de equipamentos na ESMAD</h2>
<p><a href="#">LINK AQUI</a></p>
</div>
</div>
</div>
</div>
<div class="row spacing2">
<h3 id="Parceiros">Parceiros</h3>
<div class="col-md-2 spacing4">
<a href="http://www.criticalsoftware.com/pt/homepage"><img alt="" class="img img-responsive img-thumbnail" src="parceiros/CriticalSoftware.png"></a>
</div><a href="http://www.globalmediagroup.pt/">
<div class="col-md-2 spacing4"><img alt="" class="img img-responsive img-thumbnail" src="parceiros/GlobalMedia.png"></div></a> <a href="https://www.facebook.com/pfrinvest/">
<div class="col-md-2 spacing4"><img alt="" class="img img-responsive img-thumbnail" src="parceiros/pfr.jpg" style="height:100px;width:200px"></div></a> <a href="http://www.planeta-virtual.pt/">
<div class="col-md-2 spacing4"><img alt="" class="img img-responsive img-thumbnail" src="parceiros/PlanetaVirtual.png"></div></a> <a href="https://www.sonae.pt/pt/">
<div class="col-md-2 spacing4"><img alt="" class="img img-responsive img-thumbnail" src="parceiros/Sonae.png"></div></a> <a href="http://www.agros.pt/">
<div class="col-md-2 spacing4"><img alt="" class="img img-responsive img-thumbnail" src="parceiros/Agros.png"></div></a>
</div>
<div class="row">
<div class="col-md-2 spacing4"><img alt="" class="img img-responsive img-thumbnail" src="parceiros/VDC.png" style="height:100px;width:200px"></div>
</div>
<div>
<div class="row spacing5">
<div class="col-md-offset-1 col-md-3">
<div class="row" style="margin-top:5%">
<p>Coordenador do curso: Mário Pinto</p>
<p>Email: MarioPinto@eseig.ipp.pt</p>
</div>
</div>
<div class="col-md-4">
<form action="" class="form-group"></form>
<textarea class="form-control" cols="30" id="" name="" rows="10">Dúvidas gerais acerca do curso...</textarea>
</div>
<div class="col-md-offset-1 col-md-3" style="margin-top:12%"><img alt="" class="img img-responsive img-thumbnail" src="Pporto.png"></div>
</div>
</div>
<script src="jquery-3.1.1.js">
</script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js">
</script>
<script src="typed.js">
</script>
<script src="page.js">
</script>
</div>
</div>
</body>
</html>
的javascript
$(document).ready(function(){
console.log("a");
var sentence1 = "System.out.println('TSIW - Um curso em constante inovação')";
$("#wrapper").typed({
strings: [sentence1],
typeSpeed: 30
});
$(document).off('keypress');
var menu = $('.menu2');
var origOffsetY = menu.offset().top;
function scroll() {
if ($(window).scrollTop() >= origOffsetY) {
$('.menu2').addClass('sticky');
$('.content').addClass('menu-padding');
} else {
$('.menu2').removeClass('sticky');
$('.content').removeClass('menu-padding');
}
}
document.onscroll = scroll;
});
CSS
body{
background-color:#D3D3D3;
font-family: Exo;
}
.menuItem{
display:inline-block;
margin-left:150px;
font-family:Exo;
font-weight: 700;
color:gray;
line-height: 50px;
height: 50px;
}
#menu{
margin-right:200px;
}
.img-responsive{
margin:0 auto;
}
#wrapper{
text-align:center;
}
.centerBlock {
background-color:#F8F8FF;
}
.spacing{
margin-top:100px;
}
#Apresentacao{
text-align:center;
font-family:Exo;
font-weight:900;
font-size:2.2em;
}
.spacing2{
margin-top:50px;
}
.aluno{
margin-top:30px;
}
#competencias{
padding:15px;
}
#Saidas{
padding:15px;
}
.backColor {
background-color: #D3D3D3;
padding:0;
}
.foco{
font-weight:700;
}
iframe{
display: block;
margin: 0 auto;
max-width: 100%;
}
.spacing4{
margin-top:20px;
}
#PlanoEstudos{
text-align:center;
font-family:Exo;
font-weight:900;
font-size:2.2em;
}
#Parceiros{
text-align:center;
font-family:Exo;
font-weight:900;
font-size:2.2em;
}
.carousel-control.left,
.carousel-control.right {
background-image: none
}
#Noticias{
text-align:center;
font-family:Exo;
font-weight:900;
font-size:2.2em;
}
.ano{
display:inline-block;
}
.anos{
padding:0;
}
.ano{
border:1px solid black;
padding:2px;
}
td{
width:50%;
}
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
position: absolute;
overflow: hidden;
width: 80%;
height: 80%;
left: 10%;
top: 10%;
border-bottom: 1px solid #FFF;
border-top: 1px solid #FFF;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(0,1);
-ms-transform: scale(0,1);
transform: scale(0,1);
}
.hovereffect:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hovereffect img {
display: block;
position: relative;
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
.hovereffect:hover img {
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /></feComponentTransfer></filter></svg>#filter');
filter: brightness(0.6);
-webkit-filter: brightness(0.6);
}
.hovereffect h2 {
text-transform: uppercase;
text-align: center;
position: relative;
font-size: 17px;
background-color: transparent;
color: #FFF;
padding: 1em 0;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);
}
.hovereffect a, hovereffect p {
color: #FFF;
padding: 1em 0;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.65s, -webkit-transform 0.35s;
transition: opacity 0.65s, transform 0.35s;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
.hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h2 {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.texture{
background-image: url('texture.jpg');
padding:0;
}
.spacing5{
margin-top:150px;
}
.carousel-content {
color:black;
display:flex;
align-items:center;
}
#text-carousel {
width: 100%;
height: auto;
padding: 50px;
}
#noti{
padding:20px;
}
.logo, .intro, .menu, .content {
padding:10px;
}
.menu {
background:#428bca;
color:#fff;
height:50px;
line-height:30px;
letter-spacing:1px;
width:100%;
z-index: -1; position:relative;
}
.content {
margin-top:10px;
}
.menu-padding {
padding-top:40px;
}
.content p {
margin-bottom:20px;
}
.sticky {
position:fixed;
top:0;
}