diff --git a/js/main.js b/js/main.js
index 9b2e05e..4dc7211 100644
--- a/js/main.js
+++ b/js/main.js
@@ -9,6 +9,29 @@ let isClose = true,
     headerMenuBtn = $('.btn-img'),
     currentRem = 0;
 
+function getRem() {
+    let windowWidth = window.innerWidth
+    return windowWidth * (100 / (windowWidth > 768 ? 1920 : 750));
+}
+function rszcal() {
+    currentRem = getRem();
+    $('html').css('font-size', currentRem + "px");
+}
+
+function headerEffect() {
+    let t = $(document).scrollTop(), flag;
+    if ($(window).width() > 768) {
+        flag = t > 4 * currentRem;
+    } else {
+        flag = t > 0.6 * currentRem;
+    }
+    if (flag) {
+        header.removeClass('style1').addClass('style2');
+    } else {
+        header.removeClass('style2').addClass('style1');
+    }
+}
+
 let t1;
 function showMenu() {
     clearTimeout(t1);
@@ -34,32 +57,13 @@ function hideMenu() {
 }
 
 $(function () {
-    function getRem() {
-        let windowWidth = window.innerWidth
-        return windowWidth * (100 / (windowWidth > 768 ? 1920 : 750));
-    }
-    function rszcal() {
-        currentRem = getRem();
-        $('html').css('font-size', currentRem + "px");
-    }
-    $(window).resize(rszcal);
     rszcal();
+    $(window).resize(rszcal);
+    $(window).scroll(headerEffect);
 
     $('.header .menu-group').load('../common/header.html');
     $('.footer').load('../common/footer.html');
-    $(window).scroll(function () {
-        let t = $(document).scrollTop(), flag;
-        if ($(window).width() > 768) {
-            flag = t > 4 * currentRem;
-        } else {
-            flag = t > 0.6 * currentRem;
-        }
-        if (flag) {
-            header.removeClass('style1').addClass('style2');
-        } else {
-            header.removeClass('style2').addClass('style1');
-        }
-    });
+    
     header.on('click', '.menu-btn', function () {
         (isClose == true) ? showMenu() : hideMenu();
     });