Source:  Twitter logo

I'm totally new in reactjs world.I have a navigation bar which is placed in 100px from the top. when i scroll down my page that navigation bar should be sticky on top.

my code of navigation bar class is

export default class NavBar extends React.Component {
  constructor(props) {

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false
  toggle() {
      isOpen: !this.state.isOpen
  render() {
    return (
      <div id="stickyheader">
        <Navbar color="light" white expand="md">
          <NavbarBrand href="/">
              options={{ width: 10 },{ height: 50 },{ mode: 'pad' }}

          <NavbarToggler onClick={this.toggle} />
            <Collapse isOpen={this.state.isOpen} navbar>
              <Nav className="ml-auto" navbar>
                  <NavLink href="/components/">HOME</NavLink>
                  <NavLink href="#">ALL CARS</NavLink>
                  <NavLink href="#">RATES</NavLink>
                  <NavLink href="#">ABOUT US</NavLink>
                  <NavLink href="#"><FontAwesomeIcon icon="users" />  BECOME A PARTNER</NavLink>



jquery code

        // Check the initial Poistion of the Sticky Header
        var stickyHeaderTop = $('#stickyheader').offset().top;

                if( $(window).scrollTop() > stickyHeaderTop ) {
                        $('#stickyheader').css({position: 'fixed', top: '0px'});
                        $('#stickyalias').css('display', 'block');
                } else {
                        $('#stickyheader').css({position: 'static', top: '0px'});
                        $('#stickyalias').css('display', 'none');

this jquery code is working fine when I used in html. I guess the problem is to indicate of id="stickyheader" I referred some links but I didn't find proper solution. please guide me to solve this.Thanks for advanced.

You can init jQuery function after react initial render - just call it from componentDidMount.

1 users liked answer #0dislike answer #01
xadm profile pic

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).