如何在网站上构建改变设计的主菜单?

时间:2016-08-22 13:18:12

标签: javascript html css

如果有人知道,如果要在that网页上建立主菜单,请帮助我吗?

我非常喜欢他们的菜单,即当你向下滚动时它会发生变化。当你再次回到顶部时,它会重置为原始设计。非常感谢。

我知道如何创建菜单,编辑它等等。我不知道什么原理可以切换设计。

2 个答案:

答案 0 :(得分:0)

正如其他人所指出的,Stack Overflow不是代码编写服务。相反,志愿者提供协助解决问题的编码问题。我们修复你的代码;我们不写它。

您在帖子中引用的导航的基本前提是scrollTop()https://api.jquery.com/scrollTop/)。您的参考站点上使用的WordPress主题(Avia)具有执行以下操作的jQuery函数:

  • 默认情况下,添加一个应用透明效果的类。

  • '收听'网站的滚动位置,如果是>50px,则删除透明度类(允许默认样式生效)。根据需要重新应用透明度类。

除此之外,还有一些CSS transition效果可以使更改更加顺畅。这个特定的网站依赖于jQuery,因为它是一个WordPress安装,但你可以使用任何其他JavaScript库(或者如果你是如此倾向于纯JS)来实现同样的效果。

答案 1 :(得分:0)

我们走了:

您应该使用这样的jQuery脚本:

当您滚动超过210px时,这会将页面颜色更改为蓝色,如果您重新启动,它将恢复为红色:

$(document).ready(function(){       
            var scroll_pos = 0;
            $(document).scroll(function() { 
                scroll_pos = $(this).scrollTop();
                if(scroll_pos > 210) {
                    $("#header_menu").css('background-color', 'blue');
                } else {
                    $("#header_menu").css('background-color', 'red');
                }
            });
        });

或者您可以看到代码源,打开网页并单击鼠标右键选择“Explore”(捷克语中的Prozkoumat)。在这里你可以看到它是如何工作的,很容易:)

希望它有所帮助;)