**已关闭。**此问题需要调试详细信息。它目前不接受答案。
**想要改进此问题？**更新问题，使其位于堆栈溢出主题上。

7小时前关门了。
改进这个问题
我想用react中的jquery修复滚动条上的标题。使用SimplejQuery和css3在scroll上创建固定标题的整个过程分为三个步骤-
标题放置在布局的顶部。
标题与其余内容一起向上移动，并离开视图。
当第一部分看不见的时候，它就会回来。
标题
src>组件>分子>标题>index.js

import React from 'react'
import '../Header/style.scss'
import { RouteConfig } from '../../../Configure/RouteConfig'
import Router from '../../../Service/RouterService'
import $ from 'jquery'

const Header = () => {
    return (
        <>
            <header class="header">
                <h1 style={{ cursor: "pointer" }} onClick={() => Router.pushRoute(RouteConfig.LANDING)} class="logo"><img src="data:image/webp;base64,UklGRhwCAABXRUJQVlA4TBACAAAvcMAIEIdAkG3T3d/5GmraNmDScZY/3RJI2rj373xFjSSpwX0zH+g4OxcAQAYVEWYETGjsgoA6Y96r85N67kOWbFtxWx3QFUKA2Hf+06VJ7CSv/Yno/wToX/UK+PcAUL9WzBXoJf0UIbN+7EcIje3zJyjs9/D9GeN9SGcDyO8Vrwrw3Lay0qEX+0gCuGdluDSGB+iTmBvQcnxR6qxLGEJlWcJW7EDTHODRPAFESc7aX3KynYfGZtlqQI8zG+6FDSZldvMr6nBFnQ1AkgNcId4AacMBTm35Qu7uUQZQDh0FwF6Qa62XJNlwSB1wSapAWRlA1ifNC1A1VqC+YHNiMoA4ONAX4QGaXgOQJifAS+JVGkvTNWg0d/dFAXp8zTHYxAZ7QWbb5BvLoQFc+jR392ifl9w9bWXeYvqEj9wrAHtBBepOYLwtymbXRnR336JshOFZHEM8XtMkhZkNl6SVDWEwoO9xrtQAfFaARxrS5By0zgCucA8+s6HO1AEfbqAu7mPocZUGyiEdBcClAtRJBapUAZfOYW2zeuisjFcMGeAK0QHSrEgOUFeqw2YPkgGUQ0cBsA21nSqps+yd0UJjs2nmkhrAtQpt75SkzG7WTmirGiSlRTvyTKGtWtiKHejHQuHeeExT33BtSakCvSRN7X6gXUHKHUqUlEqHXpLGlS6AFhZSzBXoJWkdcwNajvrIf8I=" alt="" /></h1>
                <div id="menuToggle">
                    <input type="checkbox" />
                    <span></span>
                    <span></span>
                    <span></span>
                    <ul class="main-nav">
                        <li><a onClick={() => Router.pushRoute(RouteConfig.LANDING)}>Home</a></li>
                        <li><a onClick={() => Router.pushRoute(RouteConfig.ABOUT)}>About</a></li>
                        <li><a onClick={() => Router.pushRoute(RouteConfig.PORTFOLIO)}>Portfolio</a></li>
                        <li><a onClick={() => Router.pushRoute(RouteConfig.BLOG)}>Blog</a></li>
                        <li><a onClick={() => Router.pushRoute(RouteConfig.CONTACT)}>Contact</a></li>
                        <li><a id='email-contact' onClick={() => Router.pushRoute(RouteConfig.CONTACT)}>Fire Me An Email</a></li>
                    </ul>
                </div>
            </header>
        </>
    )
}
export default Header;

style.scss
src>组件>分子>标题>style.scss

.header {
    padding: 0px 40px;
    border-bottom: 1px solid black;
    background: #5AFF80;
    .logo{

            img{
                margin-left: 30px !important;
            }
       }
    }
    .main-nav {
        list-style: none;
        display: flex;
        justify-content: center;
        font-size: 20px;
        margin-top: -2.5rem;
        margin-left: 10rem;
        li{
            z-index: 1;
        a {
            padding: 18px 38px;
            border-left: 1px solid black;
            color: black;
            border-bottom: 1px solid;
            &:hover{
                cursor: pointer;
            }
        }
        #email-contact{
            text-decoration: underline;
        }
        a:hover {
            text-decoration: none;
            background: #00E64D;
          }
    }
    }
    #menuToggle input,#menuToggle span{
        display: none;
    }

@media screen and (max-width: 767px) {
    .header{
        border: unset;
        .logo{
            margin: unset;

                img{
                    margin:unset !important;
                }

        }
    #menuToggle{
        display: block;
        position: absolute;
        top: 19px;
        right: 50px;
        z-index: 1;
        -webkit-user-select: none;
        user-select: none;
       .main-nav{
           display: none;
       }
        input {
                display: block;
                width: 40px;
                height: 32px;
                position: absolute;
                top: -7px;
                left: -5px;
                cursor: pointer;
                opacity: 0;
                z-index: 2;
                -webkit-touch-callout: none;
            }
                span{
                        display: block;
                        width: 33px;
                        height: 4px;
                        margin-bottom: 5px;
                        position: relative;
                        background: #000;
                        border-radius: 3px;
                        transform-origin: 4px 0px;
}
    }
    #menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(2px, 0px);
  transition: transform 0.4s cubic-bezier(.99,.99,.01,0);
  z-index: 1;
}

# menuToggle input:checked ~ span:nth-last-child(3)

{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

# menuToggle input:checked ~ span:nth-last-child(2)

{
  opacity: 1;
  transform: rotate(-45deg) translate(-2px, 0px);
  transition: transform 0.4s cubic-bezier(.99,.99,.01,0);
  z-index: 1;
}

# menuToggle input:checked ~ .main-nav

{
    position: absolute;
    width: 300px;
    background: #ededed;
    display: block;
    transform: translate(-50px);
    margin: -100px 0 0 0;
    padding: 0px 50px;
    padding-top: 125px;
    padding-bottom: 30px;
    right: -100px;
    li{            
        margin-bottom: 1rem;
    a{
        font-size: 22px;
        border: none;
        padding: unset;
        text-decoration: none;
        }
    }
}
}
}

index.js和style.scss文件的结构非常简单，并且不言自明。我想在标题中添加一个用jquery编写的粘性类。添加类的目的是在向下滚动时从顶部效果中显示/固定标题幻灯片。下面是一节课：

$(window).scroll(function() {
  var header = $(document).scrollTop();
  var headerHeight = $(".header").outerHeight();
  if (header > headerHeight) {
    $(".header").addClass("fixed");
  } else {
    $(".header").removeClass("fixed");
  }
});

成功添加类后，我将在css中完成其余的工作。那么，我如何用纯css和jquery来修复标题呢？