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) {
    super(props);

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

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

              </Nav>
            </Collapse>
        </Navbar>
      </div>

    );
  }
}

jquery code

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

        $(window).scroll(function(){
                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
xadm

Copyright © 2022 QueryThreads

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