无法使用 react-sticky 粘贴我的标题组件

Question

我正在开发一个网站，我不想粘贴我的标题组件。我正在使用来自https://www.npmjs.com/package/react-sticky 的react 和react-sticky lib 进行开发

这是我使用的文件sticky。

import React from 'React'
import { StickyContainer, Sticky } from 'react-sticky'

class main extends React.Component {
  render () {
    return (
      <StickyContainer>
        <Sticky>
          {({style}) => (
            <components.common.header style={style}/>
          )}
        </Sticky>
        <components.common..... />
        <components.common..... />
        <components.common..... />
        <components.common.footer />
      </StickyContainer>
    )
  }
}

export default main

这是我的webpack.config.js：

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const merge = require('webpack-merge')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const env = require('./src/env.js')
const TARGET = process.env.npm_lifecycle_event
process.env.BABEL_ENV = TARGET

const PATHS = {
  app: path.join(__dirname, 'src'),
  build: path.join(__dirname, 'build'),
  assets: path.join(__dirname, 'assets')
}

const common = {
  entry: [PATHS.app],
  module: {
    rules: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        include: PATHS.app,
        loaders: ['babel-loader']
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { modules: true } }],
        include: /flexboxgrid/
      },
      {
        test: /\.scss$/,
        exclude: /flexboxgrid/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { modules: true } },
          'sass-loader'
        ]
      },
      {
        test: /\.jpe?g$|\.gif$|\.png$/i,
        loader: 'url-loader?name=[name].[ext]'
      },
      {
        test: /\.otf$|\.eot$|\.svg$|\.ttf|\.woff|\.woff2$/,
        loader: 'url-loader?name=[name].[ext]'
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx'],
    modules: ['node_modules', path.resolve(__dirname, './node_modules')],
    mainFields: ['browser', 'web', 'browserify', 'main', 'style']
  }
}

if (TARGET === 'start' || !TARGET) {
  module.exports = merge(common, {
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          use: ['source-map-loader'],
          enforce: 'pre'
        }
      ]
    },
    devtool: 'inline-source-map',
    devServer: {
      contentBase: PATHS.build,
      historyApiFallback: true,
      hot: true,
      inline: true,
      progress: true,
      stats: 'errors-only',
      https: true,
      host: env.host,
      port: env.port,
      overlay: {
        errors: true
      },
      watchOptions: {
        watch: true
      }
    },
    plugins: [
      new MiniCssExtractPlugin({ filename: 'assets/style.css' }),
      new webpack.HotModuleReplacementPlugin(),
      new HtmlWebpackPlugin({
        template: PATHS.app + '/index.html',
        inject: 'body'
      })
    ],
    output: {
      path: PATHS.build,
      filename: 'bundle.js',
      publicPath: '/'
    }
  })
}

if (TARGET === 'production') {
  module.exports = merge(common, {
    plugins: [
      new MiniCssExtractPlugin({ filename: 'style.css' }),
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: "'production'"
        }
      })
    ],
    output: {
      path: '/build',
      filename: 'bundle.js'
    }
  })
}

我没有从控制台收到任何错误，问题是标题没有贴在顶部。

谁能帮帮我？

谢谢！

编辑

经过更多测试，我发现style 是空的。然后，当我更改屏幕尺寸时，它会被填满并且可以正常工作。

有一种方法可以强制进行此屏幕更新吗？

Answer 1

好的，我自己解决了，分享一下我的做法。

首先，要让sticky 你不需要一个库。

你只需要添加你的css这行

left: 0;
top: 0;
position: fixed;
transform: translateZ(0);

之后，您需要使用 z-index 来处理其他组件。

这样做你可以在没有任何框架的情况下实现sticky。

我以后给自己留个问题：

这适用于所有设备？