JS
$(document).ready(function(){
var tamanhotela=$(window).height()
$(window).scroll(function(){
if($(this).scrollTop() > tamanhotela-60){
$("header").addClass("menufixo")
}else{
$("header").removeClass("menufixo")
}
})
$("#pag1").click(function(){
$("html, body").animate({
scrollTop:0
}, 2000)
})
$("#pag2").click(function(){
$("html, body").animate({
scrollTop:$("#servicos").offset().top
}, 2000)
})
$("#pag3").click(function(){
$("html, body").animate({
scrollTop:$("#quemsomos").offset().top
}, 2000)
})
$("#pag4").click(function(){
$("html, body").animate({
scrollTop:$("#contato").offset().top
}, 2000)
})
//----------------SUBMENU ESCONDIDO-----------------------------------
$(".main").click(function(){
$(".submenu").animate({
height:"toggle"
},500)
})
})HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Acer Haus - Jardins Ineligentes</title>
<meta name="viewport" content="device-widh, iniial-scale=1">
<script src="js/jquery-3.3.1.min.js"></script>
<link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/estilo.css">
<link rel="stylesheet" href="css/tablet.css">
<link rel="stylesheet" href="css/celular.css">
<script src="js/script.js"></script>
<link href="js/slick/slick-theme.css" rel="stylesheet">
<link href="js/slick/slick.css" rel="stylesheet">
<script src="js/slick/slick.min.js"></script>
</head>
<body>
<section id="home" class="bgparallax">
<img src="imagem/banner.png" class="subimg">
</section>
<header>
<nav>
<a href="#" id="pag1">Home</a>
<a href="#" id="pag2">Serviços</a>
<a href="#" id="pag3">Sobre</a>
<a href="#" id="pag4">Contato</a>
</nav>
<div class="main"><i class="fa fa-bars"></i></div>
<div class="submenu">
<a href="#" id="pag1">Home</a>
<a href="#" id="pag2">Serviços</a>
<a href="#" id="pag3">Sobre</a>
<a href="#" id="pag4">Contato</a>
</div>
</header>CSS
@charset "utf-8";
/* CSS Document */
@media screen and (max-width:1024px) and (min-width:600px){
body, html{
width: 100%;
height: 100%;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size: 16px;
color: #666666;
margin: 0 auto;
}
.bgparallax{
margin: auto;
background-size: cover;
}
.tituloprincipal{
text-align: center;
padding-top: 5%;
font-size: 24px;
width: 200px;
margin: 5% auto;
border-bottom: 1px solid #1FD1B8;
font-family: exo-bold;
}
.imgsobre{
border-radius: 50%;
display: block;
margin: auto;
}
.subtitulosession{
text-align: center;
font-family: exo-ligth;
font-size: 20px;
}
/* HOME */
header{
text-align: center;
width: 100%;
height: 20%;
z-index: 1;
}
nav{
display: none;
}
.subimg{
width: 100%;
}
.main{
background-color: #333333;
width: 100%;
color: #FFFFFF;
padding: 1%;
font-size: 26px;
cursor: pointer;
box-sizing: border-box;
height: 25%;
z-index: -5;
}
.submenu{
background-color: #333333;
width: 100%;
color: #FFFFFF;
padding: 1%;
position: absolute;
text-align: center;
box-sizing: border-box;
font-family: exo-bold;
display: none;
}
.submenu a{
display: block;
color: #FFFFFF;
padding: 1.5%;
text-decoration: none;
border-top: 1px solid #FFFFFF;
width: 30%;
margin: auto;
z-index: -4;
}
.titulohome{
margin: 0;
color: #FFFFFF;
font-size: 50px;
margin-left: 5%;
padding-top: 15%;
}
.subtitulo{
text-align: center;
font-size: 20px;
width: 100px;
margin: 5% auto;
border-bottom: 1px solid #36ADF0;
}
.subtitulohome{
margin: 0;
color: #FFFFFF;
font-size: 20px;
font-weight: lighter;
margin-left: 5%;
}
.menufixo{
position: fixed;
margin-top: 0;
top: 0;
Meu menu funciona normalmente no desktop com efeito parallax mas quando muda para mobile ele não funciona, quando clico em uma seção no menu ele me move para home
