Question

正在尝试克隆此[https://imdev.in/]投资组合网站以进行练习。从我的理解中，我看到了在滚动时触发的这些很酷的过渡。就像滚动浏览时一样，以前透明的导航栏变暗。我很想学习如何做到这一点，因此，我们非常感谢您的投入。谢谢。

Answer 1

您将在窗口对象上添加一个事件侦听器，如下所示：

window.addEventListener('scroll', animate)

  function animate() {
    // Logic to add animation here
  }

Answer 2

基本上，您需要使用scroll function in jquery或javascript的滚动事件。因此，每当用户滚动时，您都可以更改导航栏的css或直接向其添加或删除新类。您可以使用bootstrap创建带有许多预构建的CSS类的灵活导航栏。这是最适合您的javascript代码。

my_text <- data_frame(subj = as.factor(c(12,14,18,20,11,15,17)), group = c(rep("t", 4), rep("u", 3)), mean = c(rep(105, 7)))

ggplot(df, aes(x=subj, y=mean*100, fill=time)) +
  geom_bar(stat="identity", position="dodge") +
  geom_text(data = my_text, aes(x=subj, y=mean, label = subj), inherit.aes = FALSE)+
  facet_wrap(~ group, scale="free")+
  theme(strip.background = element_blank(),
        strip.text = element_blank())

这里是JSFiddle来测试这个想法。

滚动触发过渡

2 个答案: