问为什么styled-jsx标记中的变量不起作用？

EN

import React, { useEffect } from 'react'

export default function Navbar(props) {

  const DESKTOP_Y = 250
  const MOBILE_Y = DESKTOP_Y / 2

  let sticky = false

  const handleScroll = () => {
    console.log(window.innerWidth + ' ' + window.scrollY + ' ' + sticky)
    if (window.innerWidth > 850) {
      if (window.scrollY > DESKTOP_Y) {
        sticky = true
      } else {
        sticky = false
      }
    } else if (window.innerWidth < 850) {
      if (window.scrollY > MOBILE_Y) {
        sticky = true
      } else {
        sticky = false
      }
    }
  }

  useEffect(() => {
    window.addEventListener('scroll', handleScroll)
    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [])

  return (
    <nav>
      <div>Pozdro</div>
      <style jsx>
        {`
          div {
            ${sticky ? 'position: fixed' : ''}
          }
        `}
      </style>
    </nav>
  )
}