脚本正常工作,向下滚动时确实将navContainer放在窗口的顶部但不幸的是,有一些小问题正在驱使我香蕉!
我希望在标题的outerHeight(页面标题)之后立即触发此函数。使用我所拥有的代码它可以做到但比它应该的前几个像素。看看字母" g",。navContainer应该在它通过字母的最后一个像素(它是容器的高度)之后粘在右上角但是它之前是几个像素(我会说10 px)。 固定
如果视图端口小于960px
,问题是.f-nav
转到视口的100%
,但我希望它转到100%
它的父容器.container -its父容器从其父容器.wrapper继承此属性,该容器具有max-width:60em; margin: 0 auto;
和padding:0em 0.5em
;
我对第二个问题比第一个问题更关注,是否有任何想法如何解决这个问题?如果您想了解更多细节,请与我们联系。下面的代码段也是on Codepen。
function testFunction(){/*alert("test");*/
$(window).scroll(function () {
var nav = $('.navContainer');
var headerHeight = $('.headContainer').outerHeight();
if ($(this).scrollTop() > headerHeight) {
// $('.f-nav').width($('.nav').width());
nav.addClass("f-nav");
$('.nav-wrapper').css('background','#f7f7f7');
} else {
nav.removeClass("f-nav");
}
});
};
testFunction();

body{margin:0;}
.wrapper{
margin:0 auto;
padding:0em 0.5em;
max-width:60em
}
.container{
background:gray;
}
.navContainer{
border-top:2px black solid;
border-bottom:2px black solid;
}
.navContainer ul {
list-style:none;
margin:0;padding:0;
}
.headContainer{
height:100%;
color:white;
font-family:'tahoma';
font-size:50px;
padding-bottom:30px;
}
.navContainer ul{background:green;}
.navContainer li{
display:inline;
padding:0px 50px;
vertical-align:middle;
background:red;
margin:0px;
margin-right:10px;
}
.wrapper img{width:100%;}
.f-nav{ z-index: 9999; position: fixed; top: 0; width: 100%;max-width: 60em;
}

<div class="wrapper">
<div class="container">
<div class="headContainer">Page Title</div>
<div class="navContainer">
<ul>
<li> Home 1</li><li>
Home 2</li><li>
Home 3</li>
</ul>
</div>
</div>
<img src="http://lorempixel.com/output/abstract-h-c-640-1920-9.jpg">
</div>
&#13;
答案 0 :(得分:0)
问题在于Body
有margin: 10px;
这就是为什么导航的固定顶部比您预期的更早。将margin
设置为0
,可以实现更顺畅的过渡。
您是否遗漏了Codepen中的一些代码,因为没有.fixed-nav
,除非您的意思是.f-nav
。但.f-nav
的父级是.container
。所以你需要清除它。
答案 1 :(得分:0)
var header = document.querySelector('#mainMenu');
window.addEventListener("scroll", function(event) {
this.scrollY > header.getBoundingClientRect().top ? header.classList.add('f-nav') : header.classList.remove('f-nav')
}, false);
*{box-sizing: border-box; padding: 0; margin: 0}
.rowWrap{
margin:0 auto;
padding:0em 0.5em;
max-width:60em
}
.container{
background:gray
}
menu.rowWrap{
border-top:2px black solid;
border-bottom:2px black solid;
background:green
}
menu li {
list-style:none;
margin:0;padding:0
}
header h1{
height:100%;
color:white;
font-family:'tahoma';
font-size:50px;
padding-bottom:30px
}
menu.rowWrap li{
display:inline-block;
padding:0px 50px;
vertical-align:middle;
background:red;
margin:0px;
margin-right:10px
}
article.rowWrap img{width:100%}
.f-nav{
z-index: 9999;
position: fixed;
top: 0;
right: 0;
left: 0
}
<header class=container>
<div class=rowWrap>
<h1>Page Title</h1>
</div>
</header>
<section id=mainMenu class=container>
<menu class=rowWrap>
<li> Home 1</li>
<li> Home 2</li>
<li> Home 3</li>
</menu>
</section>
<section class=container>
<article class=rowWrap>
<img src="http://lorempixel.com/output/abstract-h-c-640-1920-9.jpg" />
</article>
</section>