使用CSS在浏览器中滚动时更改标题的大小和内容 [英] Changing size and content of header at scrolling in browser with CSS

问题描述

任何想法如何制作如下所示的内容 http://studiompls.com/ case-studies / crown-maple /

Any idea how to make such a thing as seen here http://studiompls.com/case-studies/crown-maple/

标题变小，徽标更改为其他按钮。不用写任何JS就可以用CSS完成吗？

Header goes smaller and logo changes to different button. Can it be done with CSS without writing any JS?

干杯！

更新：

如果必须使用JS，您可以建议学习任何链接吗？谢谢。

if JS is a must, any link you can recommend to learn? Thanks.

推荐答案

易于使用的jQuery：

Easy use jquery:

$(window).scroll(function(){
if($(window).scrollTop() >= $('.header').outerHeight()) {
// put content here for if the page has scrolled 200 pixels
}
});

请确保您有一个js文件

Make sure you have a js file though

这篇关于使用CSS在浏览器中滚动时更改标题的大小和内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！