Últimamente tengo un problema con algo muy básico y se basa en lo siguiente, al hacer una animación de scroll en el <html>
y <body>
con JQuery, haciendo click en cualquier link que lo requiera me lleva a una parte especifica de la página web (esto todo con los .offset().top
de los objetos), hasta ahí todo muy correcto, pero al hacer scroll tanto con el mouse como haciendo click en otro link que también debería llevarme a otra parte de la pagina, esta simplemente se queda bloqueada en la primera sección que el usuario haya seleccionado, ¿que debería hacer para solucionarlo? acá abajo dejo todo mi código, gracias. (ejecutar en pagina completa, aún no es responsive).
$(document).ready(function() {
var nav = $("nav").offset().top
var head = $("#header").offset().top
var inicio = $("#inicio").offset().top
var nosotros = $("#nosotros").offset().top
var tiendas = $("#tiendas").offset().top
var shop = $("#shop").offset().top
var contacto = $("#contacto").offset().top
$(window).scroll(function() {
if($(window).scrollTop() >= nav) {
$("nav").css({"position": "fixed"});
$("nav").css({"top": "0"});
$("nav").css({"transition": "0s"});
} else {
$("nav").css({"position": "absolute"});
$("nav").css({"top": "55%"});
$("nav").css({"transition": "0s"});
}
if($(window).scrollTop() >= inicio) {
$("nav").css({"background-color": "rgb(61, 217, 212)"});
$("nav h1").css({"margin-left": "0px"});
$(".nav-cont").css({"padding-right": "3%"});
$(".in").css({"font-weight": "600"});
} else {
$("nav").css({"background-color": "transparent"});
$("nav h1").css({"margin-left": "-150px"});
$(".nav-cont").css({"padding-right": "33%"});
$(".in").css({"font-weight": "400"});
};
if($(window).scrollTop() >= nosotros) {
$(".in").css({"font-weight": "400"});
$(".nos").css({"font-weight": "600"});
} else {
$(".nos").css({"font-weight": "400"});
};
if($(window).scrollTop() >= tiendas) {
$(".nos").css({"font-weight": "400"});
$(".ti").css({"font-weight": "600"});
} else {
$(".ti").css({"font-weight": "400"});
};
if($(window).scrollTop() >= shop) {
$(".ti").css({"font-weight": "400"});
$(".sh").css({"font-weight": "600"});
} else {
$(".sh").css({"font-weight": "400"});
};
if($(window).scrollTop() >= contacto) {
$(".sh").css({"font-weight": "400"});
$(".cont").css({"font-weight": "600"});
} else {
$(".cont").css({"font-weight": "400"});
};
$(".in").on("click", function(){
$("html, body").animate({scrollTop: inicio},500);
});
$(".nos").on("click", function(){
$("html, body").animate({scrollTop: nosotros},500);
});
$(".ti").on("click", function(){
$("html, body").animate({scrollTop: tiendas},500);
});
$(".sh").on("click", function(){
$("html, body").animate({scrollTop: shop},500);
});
$(".cont").on("click", function(){
$("html, body").animate({scrollTop: contacto},500);
});
});
});
* {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
margin: 0 0;
padding: 0 0;
}
.sect {
width: 100%;
height: 100%;
}
nav {
height: 10%;
width: 100%;
background-color: transparent;
position: absolute;
transition: .2s;
top: 55%;
}
nav h1 {
font-size: 2.3em;
padding-top: 0.3em;
padding-left: 0.4em;
font-family: sans-serif;
margin-left: -150px;
transition: .2s;
}
nav h1 span {
color: white;
}
.nav-cont {
float: right;
margin-top: -32px;
padding-right: 33%;
transition: .2s;
}
.nav-cont ul {
list-style: none;
}
.nav-cont ul li {
float: left;
}
.nav-cont ul li a {
margin-left: 10px;
margin-right: 10px;
text-decoration: none;
text-transform: uppercase;
color: white;
font-weight: 400;
}
.nav-cont ul li a:hover {
font-weight: 600;
}
header {
background-image: url("../img/3D8.jpg");
background-repeat: no-repeat;
background-position: top;
background-size: cover;
background-attachment: fixed;
}
.header-cover {
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.31);
}
.title-container {
padding-top: 19%;
}
.title-container h1 {
text-align: center;
font-size: 5em;
}
.title-container h1 span {
color: white;
}
#prefooter {
height: 25px;
width: 100%;
background-color: rgb(233, 66, 66);
}
#prefooter p {
text-align: center;
color: white;
font-size: 10px;
font-style: italic;
padding-top: 6px;
cursor: pointer;
}
footer {
height: 50px;
background-color: rgb(217, 61, 61);
}
footer p {
text-align: center;
color: white;
font-weight: 500;
padding-top: 15px;
}
footer p span {
background-color: white;
cursor: pointer;
transition: .2s;
-webkit-transition: ,2s;
}
footer p span:hover {
background-color: transparent;
}
<head>
<meta charset="utf-8">
<title>Maxipet Maqueta</title>
<link rel="stylesheet" href="./css/master.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
<nav>
<h1>Maxi<span>pet</span></h1>
<div class="nav-cont">
<ul>
<li><a class="in" href="#inicio">Inicio</a>
</li><li><a class="nos" href="#nosotros">Nosotros</a>
</li><li><a class="ti" href="#tiendas">Tiendas</a>
</li><li><a class="sh" href="#shop">Productos</a>
</li><li><a class="cont" href="#contacto">Contacto</a></li>
</ul>
</div>
</nav>
<header id="header" class="sect">
<div class="header-cover">
<div class="title-container">
<h1>Maxi<span>pet</span></h1>
</div>
</div>
</header>
<section id="inicio" class="sect">
</section>
<section id="nosotros" class="sect">
</section>
<section id="tiendas" class="sect">
</section>
<section id="shop" class="sect">
</section>
<section id="contacto" class="sect">
</section>
<section id="prefooter">
<p>Mas información</p>
</section>
<footer><p>© Maxpet 2017 - Made With ❤ By <span>Crawford</span></p></footer>
</body>