Question

我在reactjs世界中是一个全新的人。我有一个导航栏，它位于顶部100px处。当我向下滚动页面时，导航栏应位于顶部。

我的导航栏类代码为

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代码

$(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');
                }
        });
  });

当我在 html 中使用时，

此 jquery 代码工作正常。我想问题是要指出 id =“ stickyheader” 我引用了一些链接，但是找不到合适的解决方案。请指导我解决此问题。感谢高级。

Answer 1

您可以在响应初始渲染后初始化jQuery函数-只需从componentDidMount调用它即可。

我如何在reactjs中使用jQuery

1 个答案: