Если вы хотите, чтобы скрипты загружались до готовности DOM, вы можете добавить свои скрипты в файл html.js.
Из документов Гэтсби:
Гэтсби использует компонент React для рендеринга сервера и других
части HTML за пределами основного приложения Gatsby.
Подробнее об этом здесь .
В вашем случае вы можете написать свой сценарий в методе жизненного цикла реакции componentDidMount, потому что вам нужен доступ к DOM (поскольку вы используете там jQuery), вам нужно запустить скрипт после тела загружен, поэтому размещение вашего скрипта в <head> не будет работать, вам нужно добавить его в метод componentDidMount, сначала сделав компонент компонентом класса, чтобы получить доступ к методам жизненного цикла реагирования.
import React from 'react'
import Link from 'gatsby-link'
import $ from 'jquery'
import './header.css'
class Header extends React.Component {
componentDidMount () {
$(window).scroll(function () {
if ($(window).scrollTop() > 10) {
$('.Header').addClass('floatingHeader');
} else {
$('.Header').removeClass('floatingHeader');
}
})
}
render () {
return (
<div className='Header'>
<div className='HeaderGroup'>
<Link to='/'><img src={require('../img/logo_nav.png')} width='60' /></Link>
<Link to='/index'>Selected Works</Link>
<Link to='/uber'>Uber Thoughts</Link>
<Link to='/awards'>Awards</Link>
<Link to='/about'>About</Link>
</div>
</div>
)
}
}
export default Header
Вы также можете использовать шаблон макета Gatsby, такой как проект gatsby-starter-blog , и поместить свой сценарий внизу вызова {children} как <script>Your script</script>, и он будет доступен во всех ваши страницы, так же, как и файл html.js, но поскольку вам нужен доступ к DOM, вам нужно поместить его в тело, чтобы ваш скрипт работал (больше информации о макетах Gatsby здесь ).