diff --git a/themes/hexo/components/TopNav.js b/themes/hexo/components/TopNav.js
index 541a99a7..6f199fa6 100644
--- a/themes/hexo/components/TopNav.js
+++ b/themes/hexo/components/TopNav.js
@@ -41,6 +41,7 @@ const TopNav = props => {
   useEffect(() => {
     window.addEventListener('scroll', topNavStyleHandler)
     router.events.on('routeChangeComplete', topNavStyleHandler)
+    topNavStyleHandler()
     return () => {
       router.events.off('routeChangeComplete', topNavStyleHandler)
       window.removeEventListener('scroll', topNavStyleHandler)