我正在尝试将Headroom.js用于我的导航栏,但是在使其正常工作时遇到了一些困难。
(当向下滚动时,Headroom JS应该隐藏标题和嵌套导航,但在需要时显示)
由于我仍然是使用javascript的初学者,因此无法确定我会在哪里出错,因此我非常简短地表示歉意。
我的HTML设置如下:
<!-- initially -->
<header class="headroom">
<!-- scrolling down -->
<header class="headroom headroom--unpinned">
<!-- scrolling up -->
<header class="headroom headroom--pinned">
<header id="header" class="header header--fixed hide-from-print" role="banner">
<nav>
</nav>
</header>
</header>
</header>
</header>
CSS:
.headroom {
transition: transform 200ms linear;}
.headroom--pinned {
transform: translateY(0%);}
.headroom--unpinned {
transform: translateY(-100%);}
header.headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out; z- index: 9999;}
header.headroom--unpinned {top: -75px;z-index: 9999;}
header.headroom--pinned {top: 0; z-index: 9999;}
nav{
margin:0;
padding:0px;
text-align:center;
background-color: #ffffff;
border-bottom: 2px solid #d5dbdb;
width: 100%;
height: 60px;
position: fixed;
z-index: 9999;
clear: both;
top:0;
opacity: 0.9;}
JS-我在HTML中链接了headroom.js文件和jQuery文件:
<script type="text/javascript" src="js/headroom.js"></script>
我还在页面底部添加了一些脚本:
<script>
(function() {
var header = document.querySelector("#header");
if(window.location.hash) {
header.classList.add("slide--up");
}
new Headroom(header, {
tolerance: {
down : 10,
up : 20
},
offset : 205,
classes: {
initial: "slide",
pinned: "slide--reset",
unpinned: "slide--up"
}
}).init();
}());
</script>
我不确定自己做错了什么,任何意见或反馈都将不胜感激(Y)您可以在此处查看我尝试使用(并遵循)的信息源-http: //wicky.nillia.ms/headroom .js /
无需插件,这是一个 FIDDLE
<header class="default">
</header>
header {
background: #444;
position: fixed;
left: 0;
width: 100%;
height: 80px;
transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
}
.default {
top: 0;
}
.fixed {
top: -80px;
}
<script>
(function($) {
var ost = 0;
$(window).scroll(function() {
var cOst = $(this).scrollTop();
if(cOst > 200 && cOst > ost) {
$('header').addClass('fixed').removeClass('default');
}
else {
$('header').addClass('default').removeClass('fixed');
}
ost = cOst;
});
})(jQuery);
</script>
*注意:将脚本放在</body>
标签之前。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句