how can I use Jquery in reactjs

Question

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.

One way to acheive is using ref but you can use jquery library for it. like npm i jquery and then import $ from 'jquery' — Revansiddh
– Revansiddh, Commented Sep 29, 2018 at 17:38
@Revansiddh I added use jquery library already. but please give any hint how to use ref insead of id — Arebhy Sridaran
– Arebhy Sridaran, Commented Sep 29, 2018 at 17:42
reactjs.org/docs/refs-and-the-dom.html. Like ref={this.myRef} at div and this.myRef = React.createRef(); in constructor — Revansiddh
– Revansiddh, Commented Sep 29, 2018 at 18:05
I think you should consider not using jQuery. jQuery will only add extra data overhead of the downloading size of your bundle file when that code, you present, can easily be done by native javascript. But if you don't want to start from scratch, there are a lot of open sourced packages doing this. ex: npmjs.com/package/react-sticky — J.Lindebro
– J.Lindebro, Commented Sep 30, 2018 at 0:24

xadm · Accepted Answer · 2018-09-29 17:58:26Z

1

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

answered Sep 29, 2018 at 17:58

xadm

8,4463 gold badges17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arebhy Sridaran Over a year ago

please specify how can I do it sir?

xadm Over a year ago

stackoverflow.com/q/33351288/6124657 - you can place your code inside cDM or call fn - from this moment (time) div (with id) is available.

Collectives™ on Stack Overflow

how can I use Jquery in reactjs

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related