我该如何添加类名正文向下滚动做出反应?

时间:2018-07-12 00:21:29

标签: javascript reactjs gatsby

我想在向下滚动100px时在gatsby上添加正文className="showdiv"

我该怎么做?

我尝试此代码

state = {
    isTop: true,
  };

  componentDidMount() {
    document.addEventListener('scroll', () => {
      const isTop = window.scrollY < 100;
      if (isTop !== this.state.isTop) {
          this.setState({ isTop })
      }
    });
  }

类名

{this.state.isTop ? 'down' : 'up'}

但是我不能添加身体类别。我想要一个新颖而简单的想法。

谢谢

1 个答案:

答案 0 :(得分:1)

您可以像完成操作一样添加滚动侦听器,但是可以根据滚动位置从正文中添加/删除<GridView x:Name="MainGridStations" ItemsSource="{x:Bind Stations}" IsItemClickEnabled="True" ItemClick="GridView_ItemClick"> <GridView.ItemTemplate> <DataTemplate x:DataType="local:Station"> <Grid x:Name="WantToSelectByCode"> <Grid Background="White" HorizontalAlignment="Center" Width="300" Height="200" VerticalAlignment="Center"> <Grid Background="#e4f0fc" Height="65" VerticalAlignment="Bottom" Opacity="0.8"> <TextBlock x:Name="StationName" Text="{Binding Name}" FontWeight="Bold" Foreground="#2c9a8b" HorizontalAlignment="Center" /> </Grid> </Grid> </Grid> </DataTemplate> </GridView.ItemTemplate> </GridView> 类。

示例

var container = MainGridStations.ContainerFromIndex(0);

var presenter = VisualTreeHelper.GetChild(container, 0) as GridViewItem;