浮动标题缩放到顶部，如theverge.com [英] Floating Header with Zoom to Top like theverge.com

问题描述

我非常喜欢中的浮动标题。向下滚动时，标题保持固定在顶部，并且当您向下滚动到某个点时，将显示边缘徽标，可让您缩放备份。

如何重现一个类似的头文件，可以用HTML和CSS来完成？

方案

用CSS试试这个

  .fixedHeader {
 position：fixed; 
 top：0; 
} 
  

您应该使用jQuery构建的小按钮。
，因此您必须检查属性 scrollTop 以了解何时应显示按钮。如果你点击按钮，你应该将 .animate（）与jQuery的scrollTop属性恢复为零（0）。

DEMO

这里有小按钮和点击事件：

DEMO

I am really fond of the floating header at theverge.com. When you scroll down, the header stays fixed on top and when you scroll down to a certain point, The Verge logo appears which allows you to zoom back up.

How do I reproduce a similar header, can it be done with just HTML and CSS?

解决方案

try this with CSS

.fixedHeader {
    position:fixed;
    top: 0;
}

the small button you should build with jQuery. therefore you have to check the property scrollTop to know when the button should be shown. and if you click the button you should .animate() the scrollTop-property with jQuery back to zero (0).

DEMO

And here with small button and click-event:

DEMO

这篇关于浮动标题缩放到顶部，如theverge.com的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！