Question

我问了很长时间我如何在整数中使用百分比。其实就像在CSS中声明高度和宽度一样。

[示例]

$(window).scroll(function() {
                    var scrollVal = $(window).scrollTop();

                    if(scrollVal >= 472.141) {
                        $("nav").css("position", "fixed");
                        $("nav").css("padding-top", "0");
                        $("nav ul").css("background-image", "linear-gradient(rgba(230, 230, 230, 1) 5%, rgba(230, 230, 230, 0))");
                    } else {
                        $("nav").css("position", "relative");
                        $("nav").css("padding-top", "35%");
                        $("nav ul").css("background-image", "linear-gradient(rgba(250, 250, 250, 0), rgba(250, 250, 250, 1) 95%)");
                    }
                });

在这里，我希望百分比为整数-> if(scrollVal >= 472.141)-> 472.141应该为35%-> if(scrollVal >= 35%)

这很酷，因为scrollVal可以相对于屏幕大小...

提前谢谢！

Answer 1

您必须创建自己的函数，才能将百分比值转换为相应的像素数：

  const heightPercent = percent => window.innerHeight * percent / 100;

  console.log(heightPercent(50));
  console.log(heightPercent(10));
  console.log(heightPercent(100));

然后if(scrollVal >= 472.141)变成if(scrollVal >= heightPercent(35))。

Answer 2

解决此问题的一种方法是根据您的位置添加CSS类。例如：

$(window).scroll(function() {
    var scrollVal = $(window).scrollTop();

        if(scrollVal >= 472.141) {
            $("nav").addClass('class0');
            $("nav").removeClass('class1');
        } else {
            $("nav").addClass('class1');
            $("nav").removeClass('class0');
        }
});

在整数中使用百分比

2 个答案: