Question

现在肯定趋势的一件事是具有粘性导航的全屏标题，所有标记都已准备好与标题一起使用或在滚动过头时显示。我想知道他们在这个网站上实现了这个目标...... http://demo.tardigradestudio.com/themes/keylight/。这是我希望融入我正在设计的网站中的东西。谢谢！

Answer 1

这里很简单就是我的小提琴：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');
});
    }
    }
  });
}

Answer 2

它是通过javascript和css的组合完成的。一旦到达视口顶部，javascript就会将导航设置为position: fixed;。只需使用浏览器检查器，观看并学习......

您真的需要提出自己的一些代码，如果您想要真正的答案，请告诉我们您的确切位置。或者谷歌搜索教程可能是个好主意......

Answer 3

你可以用CSS做到这一点。有很多链接可以帮助你做到这一点。

我建议阅读此内容： http://tympanus.net/codrops/2013/06/06/on-scroll-animated-header/

关于您想要实现的目标的最佳教程之一。演示在这里： http://tympanus.net/Blueprints/AnimatedHeader/

如果您想进一步解释，这里有一些其他链接：这里有一些：

Fixed header in CSS for conditional scroll down?

http://css-tricks.com/persistent-headers/

全屏幕标题与粘性导航

3 个答案: