Question

我是新领域的初学者，所以对于我即将开始的这个项目，我想创建一个类似于本页面的菜单：http://kirschnerbrasil.cc/

我喜欢它从透明开始但是一旦你向下滚动就变得固定了，有没有办法可以在没有Javascript和CSS的情况下做到这一点？我怎么能写它才能这样呢？

先谢谢。

Answer 1

example from my code:


     $(document).ready(function () {
          $(window).on("scroll", function () {
                menuFix();
           });
  });
function menuFix() {
                var tabwidth = $(".menu").width() + "px";
                var fromTop = $(window).scrollTop();
                var topMenu = 102;// depends on menu height
                if ($(window).width() < 980) {
                    topMenu = 62;
                }
                if (fromTop > topMenu ) {
                    $(".menu").css({ 'position': 'fixed', 'top': topMenu  + "px", 'width': tabwidth });
                } else {
                    $(".menu").css({ 'position': 'relative', 'top': '0px' });
                }
            }

Answer 2

首先，不是Java而是Javascript。两者完全不同。

没有你不能用CSS实现这一点，你需要javascript。您可以使用CSS创建所有动画，但您仍然需要JS来触发。

我不会详细了解细节，因为它有很多教程可以告诉你如何做，但主要步骤是：

创建滚动菜单（固定位置）
使用CSS转换：tanslate（）将其隐藏在上面。
使用JS触发动画，将菜单移动到页面滚动所需的位置。
当您向上滚动

您可能希望使用jQuery来执行此操作，因为它对初学者来说可能更容易

现在去弄脏你的手！

祝你好运：）

透明菜单栏仅限CSS

2 个答案: