Question

我试图在反应中使用jquery来创建一个粘性标题，但它似乎没有正常工作。这是我的代码。我真的很感激帮助。我被困了几个小时试图解决这个问题。我尝试使用react-sticky但是当你滚动到far加上它总是消失我真的想要研究我的jquery技能。我试图通过webpack和索引添加jquery。

的index.html

  <!DOCTYPE html>
  <html>
     <head>
       <meta charset="utf-8">
       <link rel="stylesheet" href="./stylesheets/reset.css"/>
       <title>Portfolio Site</title>
      </head>
      <body>
        <div id="app"></div>
        <script src="https://code.jquery.com/jquery.min.js"></script>
        <script src='/scripts/bundle.js'></script>
      </body>
    </html>

这是我的Projects.jsx代码。

     import React from 'react';
     import $ from 'jquery';

     import ProjectsHeader from './ProjectsHeader.jsx';

     export default class Projects extends React.Component {
        constructor() {
        super()
       }

      render() {
          return (
            <div>
              <section className="projects-background"></section>
              <ProjectsHeader/>
              <div className="demo-space"></div>
            </div>
           )
          }
         }

这是我的webpack.config.js代码。

          module.exports = {
            entry: {
            main: './public/app/PortfolioApp.jsx'
           },
           output: {
             filename: 'bundle.js',
             path: './public/scripts'
           },
           devtool: 'sourcemap',
           module: {
             loaders: [{
               test: /\.(js|jsx)$/,
               exclude: /node_modules/,
               loader: 'babel'
            }, {
               test: /\.s?css$/,
               exclude: /node_modules/,
               loaders: ["style", "css", "sass"]
             }]
             new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery"
              })
             }
            };

这是我的Projects.scss代码。

       body{
         padding-top:350px;
       }

       .projects-background{
           top: 0;
           height: 100vh;
           width: 100vw;
           background-image: url(/img/code.jpeg);
           background-repeat: no-repeat;
           background-size: cover;
           position: fixed;
        }

        .demo-space{
            height: 200vh;
            width:100vw;
            background-color: green;
        }

        .header{
            top: 0;
            height: 15vh;
            width: 100vw;
            background-color: black;
            opacity: 0.9;
            display: flex;
            flex-direction: row;
            z-index: 1;
            span{
              height: 100vh;
              width: 33.33%;
            }
          }

          .sticky{
             position: fixed;
          }

ProjectsHeader.jsx组件代码

   import React from 'react';
   import jQuery from 'jquery';
   import $ from 'jquery';

 export default class ProjectsHeader extends React.Component{

   constructor(){
   super()
  }

  componentDidMount(){
     var head = $(".header");
     var stick = $(".sticky");
      $(window).scroll(function(){
      $(this).scrollTop() > 350
         ?head.addClass(stick)
         :head.removeClass(stick)
      })
    }

  render(){
     return(
       <div className="header">
         <span></span>
         <span></span>
         <span></span>
       </div>
     )
    }
   }

Answer 1

此： var stick = $(".sticky"); 应该这样： var stick = "sticky";

至少在jQuery语法中。

$(".sticky");返回与.sticky类选择器匹配的jQuery对象数组。你想要的是类名的字符串表示，因此"sticky"

下一个问题是引用$(this) - 它不会起作用（它返回反应类构造函数）。您在这里需要一个有效的jQuery选择器，如类或ID

像这样：

componentDidMount(){

 var head = $(".header");
 var stick = ".sticky";

 $(window).scroll(function(){
  $('.scrollingElementClass').scrollTop() > 350
     ? head.addClass(stick)
     : head.removeClass(stick)
  })
}

Answer 2

我能够通过这样做来实现它：

componentDidMount() {

    var head = $(".header");
    var stick = "sticky";

    $(window).scroll(function() {
        $(window).scrollTop() > 350
            ? head.addClass(stick)
            : head.removeClass(stick)
    })
}

反应中使用jquery的粘性div

2 个答案: