Having trouble implementing react-sticky component for username field - reactjs

Question

I'm building a simple web app using React where the user enters a valid username to bring up a diary of recently eaten food items. I have a single username field at the top of the page that I want to be sticky as the user scrolls down the entirety of the page. But as it is now, the username field is just scrolling out of view like a normal component. What am I missing? Any help would be appreciated.
app.js
import React, { Component } from 'react';
import {StickyContainer, Sticky} from 'react-sticky';
import Username from '../containers/username';
import DiaryList from '../containers/diary_list';
export default class App extends Component {
render() {
return (
<div>
<h1 className="text-xs-center">Diary</h1>
<StickyContainer>
<Sticky>
{() => {
return <Username />}}
</Sticky>
<DiaryList />
</StickyContainer>
</div>
);
}
}
username.js
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {fetchUser} from '../actions/index';
class Username extends Component {
constructor(props){
super(props);
this.state = {term: ''};
this.onInputChange = this.onInputChange.bind(this);
}
onInputChange(event) {
this.setState({term: event.target.value},
() => this.props.fetchUser(this.state.term)
);
}
render(){
return(
<div className="username">
<span className="username-field">Username:</span>
<input value = {this.state.term}
onChange={this.onInputChange} />
</div>
)
}
}
export default connect(null, {fetchUser})(Username);
diary_list.js
import React, {Component} from 'react';
import {connect} from 'react-redux';
import DishChart from './dish_chart';
class DiaryList extends Component {
constructor(props) {
super(props);
this.state = {width: $(window).width(),
height: $(window).height()
}
this.updateDimensions = this.updateDimensions.bind(this);
}
componentDidMount() {
window.addEventListener("resize", this.updateDimensions);
}
componentWillUnmount() {
window.removeEventListener("resize", this.updateDimensions);
}
updateDimensions() {
this.setState({width: $(window).width(), height: $(window).height()});
}
renderDiary(diaryData, key=diaryData.dishId) {
return (
<div key={diaryData.dishId}>
<div className="col-sm-6 col-md-4 col-lg-3" >
<ul className="list-group">
<li className="list-group-item">
<img className="img-thumbnail"src={diaryData.imageLink} alt="No image available."/>
</li>
<li className="list-group-item">{diaryData.dishName}</li>
<li className="list-group-item">Price: {diaryData.price}</li>
<li className="list-group-item">Calories: {diaryData.calories}</li>
<li className="list-group-item">Health Score: {diaryData.healthScoreM}</li>
<div className="container-fluid">
<li className="list-group-item row">
<div className="col-xs-4 carbs">
{`${diaryData.carbohydrates}G Carbs`}
</div>
<div className="col-xs-4 fat">
{`${diaryData.totalFat}G Fat`}
</div>
<div className="col-xs-4 protein">
{`${diaryData.protein}G Protein`}
</div>
</li>
</div>
<li className="list-group-item recharts-wrapper">
<DishChart data={diaryData} />
</li>
</ul>
</div>
{($(window).width() >= 480 && $(window).width() < 768) &&
key % 2 == 1 &&
<div className="clearfix visible-sm-block"></div>
}
{($(window).width() >= 768 && $(window).width() < 992) &&
key % 3 == 2 &&
<div className="clearfix visible-md-block"></div>
}
{$(window).width() >= 992 &&
key % 4 == 3 &&
<div className="clearfix visible-lg-block"></div>
}
</div>
)
}
render() {
if (this.props.diary.data == undefined) {
return (
<div>
Please enter a valid username.
</div>
)
}
return (
<div className="diary">
{this.props.diary.data.map(this.renderDiary)}
</div>
);
}
}
function mapStateToProps(state) {
return {
diary: state.diary
};
}
export default connect(mapStateToProps)(DiaryList);