Question

我真的很难获得此网站http://demo.qodeinteractive.com/bridge13/的相同标题效果。

我使用Wordpress插件myStickymenu但结果不是我想要的，而是想使用jquery但我不知道该怎么做。

Answer 1

您需要查看“滚动”字样。获取滚动位置的事件。如果滚动位置低于标题的高度，请添加一个类。添加的类将具有不同的高度值，这将覆盖默认值。

function init() {
    // Check scroll event
    window.addEventListener('scroll', function(e){
        // Check scroll position
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 300,
            header = document.querySelector("header");
        // If the scroll position is a larger value than the chosen value (shrinkOn)
        if (distanceY > shrinkOn) {
            // Add class "smaller"
            classie.add(header,"smaller");
        } else {
            // Otherwise remove it
            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/

向上/向下滚动可以平滑向上滚动菜单

1 个答案: