Lonnie McGill Lonnie McGill - 1 month ago 8
React JSX Question

Sticky div using jquery in react

I am trying to use jquery in react to create a sticky header but it doesn't seem to be working correctly. Here is my code. I would really appreciate the help. I have been stuck for hours trying to figure this out. I tried to use react-sticky but it always disappears when you scroll to far plus I really want to work on my jquery skills. I tried to add jquery through webpack and the index.

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>


This is my Projects.jsx code.

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


This is my webpack.config.js code.

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


This is my Projects.scss code.

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 component code

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

Ted Ted
Answer

This: var stick = $(".sticky"); should be this: var stick = "sticky";

At least in jQuery syntax.

$(".sticky"); returns an array of jQuery objects that match the .sticky class selector. What you want is a string representation of the class name, hence "sticky"

The next problem is the reference $(this) -- that won't work (it returns the react class constructor). You'll need a valid jQuery selector here, like a class or ID

Like so:

componentDidMount(){

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

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