现在绝对流行的一件事是带有粘性导航的全屏标题，所有标题都已准备就绪，或者在滚动经过标题时显示。我想知道他们在这个网站上实现了这一点...http://demo.tardigradestudio.com/themes/keylight/。这是我很想融入到我正在设计的网站中的东西。谢谢！
【问题讨论】：
标签： jquery css header navigation fullscreen
很简单，这是我的小提琴：http://jsfiddle.net/hgpd8/4/
您检测窗口滚动的位置，如果它大于标题的位置，则将标题设置为固定。或者只是从一开始就用 CSS 修复它，但这并不那么酷。
一些附加效果但有效：
if ($("#header").is('*')) {
var elem = $('#header');
var offset = elem.offset();
var leftValue = offset.left;
var topValue = offset.top + elem.height();
var width = elem.width();
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= topValue) {
if ($('#header').hasClass('fixed')){
}else{
$('#header').addClass('fixed');
$('#header').css({
top: '-60px',
width:width,
});
$('#header').animate({
top: '0',
}, 500, function() {
});
}
} else {
if ($('#header').hasClass('fixed')){
$('#header').removeClass('fixed');
$('#header').fadeOut('fast', function(){
$('#header').fadeIn('fast');
});
}
}
});
}
【讨论】：
它是通过 javascript 和 css 的组合完成的。一旦到达视口的顶部，javascript 就会将导航设置为position: fixed;。只需使用您的浏览器检查器并观看和学习...
您确实需要自己编写一些代码，如果您想要一个真实的答案，请准确告诉我们您遇到的问题。或者谷歌搜索教程可能是个好主意......
【讨论】：
您可以使用 CSS 做到这一点。有很多链接可以帮助您做到这一点。
我建议阅读以下内容： http://tympanus.net/codrops/2013/06/06/on-scroll-animated-header/
关于您想要实现的目标的最佳教程之一。 演示在这里： http://tympanus.net/Blueprints/AnimatedHeader/
如果您想进一步解释，这里有几个其他链接： 这里有几个：
【讨论】：