Question

如何设计一个持久的标题，在向下滚动时缩小（即变小）

P.s： - 如果可能的话，建议一个包含代码和演示的示例网站

Answer 1

您可以在此处找到所需内容：http://tympanus.net/codrops/2013/07/16/on-scroll-header-effects/或此处：http://tympanus.net/codrops/2013/06/06/on-scroll-animated-header/

Answer 2

您只需要检测滚动，然后尝试添加或删除一些css代码。

Javascript示例函数：

function init() {
    window.addEventListener('scroll', function(e){
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 300,
            header = document.querySelector("header");
        if (distanceY > shrinkOn) {
            classie.add(header,"smaller");
        } else {
            if (classie.has(header,"smaller")) {
                classie.remove(header,"smaller");
            }
        }
    });
}
window.onload = init();

这是一个例子：

http://callmenick.com/2014/02/18/create-an-animated-resizing-header-on-scroll/

滚动页面时缩小的CSS标头

2 个答案:

Demo