jqueryを反応で使用するスティッキーdiv

jqueryを反応させてスティッキーヘッダーを作成しようとしていますが、正しく動作していないようです。ここに私のコードです。私は本当に助けに感謝します。私はこれを理解しようと何時間も立ち往生している。私は反応性の粘着を使用しようとしましたが、遠くまでスクロールすると常に消えます。私は本当にjqueryのスキルに取り組んでいます。私はwebpackとインデックスを使ってjqueryを追加しようとしました。jqueryを反応で使用するスティッキーdiv

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> 
    ) 
    } 
    }

出典

2016-10-18 Lonnie McGill

あなたが共有できるので、同様

クラスと同様またはIDあなたは、ここで有効なjQueryのセレクタが必要になります'ProjectsHeader'コンポーネントのコードですか？ –

コンソールエラーが発生していますか？ –

コンポーネントコードを追加しました。私はコンソールやwebpackに何のエラーも出ません。 –

これ：少なくともjQueryの構文で var stick = "sticky";

： var stick = $(".sticky");このなければなりません。

$(".sticky");は、.stickyクラスセレクタに一致するjQueryオブジェクトの配列を返します。（それが反応するクラスのコンストラクタを返します）動作しません - あなたがしたいことは、クラス名の文字列表現である、したがって"sticky"

次の問題は参照$(this)です。

componentDidMount(){ 

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

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

出典

2016-10-18 21:13:46 Ted

私はこのように見えるように作成しましたが、まだ粘着性にはなりません。私は両方のvar stick = "sticky"を試しました。 and var stick = ".sticky";どちらもうまくいかないようです。 –

componentDidMount（）{ \t \t var head = $（ "。header"）; \t \t var stick = "sticky"; \t \t $（ウィンドウ）.scroll（関数（）{ \t \t \t $（ 'scrollingElementid。'）scrollTopスプライト（）> 350 \t \t \t \t head.addClass（スティック） \t \t \t \t。？：頭。removeClass（スティック） \t \t}） \t} \tこれは、更新されたコードである（）{ \t \tリターン（ \t \t \t

\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t

\t \t） \t} }をレンダリングします。 –

私はそれがこれを行うことによって、仕事を得ることができました：

componentDidMount() { 

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

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

出典

2016-10-18 21:39:28

優秀：嬉しいですね。 – Ted

ありがとうございます。 –

jqueryを反応で使用するスティッキーdiv

答えて

関連する問題