-1

现在绝对流行的一件事是带有粘性导航的全屏标题，标题与标题一起准备就绪，或者在滚动经过标题时显示。我想知道他们在这个网站上实现了这一点...... http://demo.tardigradestudio.com/themes/keylight/。这是我很想融入到我正在设计的网站中的东西。谢谢！

4

3 回答 3

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');
});
    }
    }
  });
}
于 2013-10-08T23:34:20.273 回答
0

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

你真的需要想出一些你自己的代码，如果你想要一个真正的答案，请告诉我们你到底在哪里卡住了。或者谷歌搜索教程可能是一个好主意......

于 2013-10-08T22:14:17.133 回答
0

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

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

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

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

修复了 CSS 中的标题以进行有条件的向下滚动？

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

于 2013-10-08T22:16:52.070 回答