jquery - change - title html attribute
¿Cómo evitar el contenido del cuerpo de desplazamiento pero permitir la navegación de desplazamiento en el móvil? (6)
Así que este es el mejor enfoque que puedo imaginar después de algunos intentos.
Puede ocultar el body-content del body-content con jQuery toggle() cuando se abre la navegación , de modo que cuando se hide y se show , su posición no cambiará.
Asegúrese de configurar overflow-y: scroll; En body.menu-open , para que la navegación pueda desplazarse.
Aquí está el código:
$(function () {
$(''.menu-toggle'').click(function () {
$(''body'').toggleClass(''menu-open'');
$(''.body-content'').toggle();
});
});
body.menu-open {
overflow-y: scroll;
/* this does not prevent scrolling in mobile safari */
}
.menu-toggle {
font-size: 40px;
cursor: pointer;
}
nav {
background: #fff;
width: 100%;
position: absolute;
left: -100%;
}
.menu-open nav {
left: 0;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav ul li {
padding: 20px 0 20px 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<header>
<span class="menu-toggle">=</span>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
</ul>
</nav>
</header>
<div class="body-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna sollicitudin, tincidunt nisl sed, eleifend diam. Maecenas
venenatis semper mauris. In faucibus congue sapien, ultrices efficitur ante pulvinar id. Duis eget egestas sem. Nullam
tincidunt purus ut molestie dignissim. Nunc dictum elit arcu. Curabitur vitae magna tortor. Proin lacinia, nisi sit amet
gravida pellentesque, orci neque tempor nunc, sit amet lobortis magna nulla id lorem. Etiam suscipit massa ut diam sollicitudin
fringilla ac ac mauris. Vestibulum pretium semper urna. Nulla risus nibh, sollicitudin eget volutpat sit amet, fermentum
non enim. Praesent gravida metus in leo pharetra congue. Maecenas augue purus, malesuada tempor venenatis at, maximus
at elit. Phasellus ipsum nunc, posuere eu metus in, mattis imperdiet sem. Duis non ultrices mi. Mauris nibh ex, varius
vel ipsum vel, fermentum semper tellus. Integer fringilla fringilla pharetra. Vivamus eleifend rhoncus mi at iaculis.
Proin suscipit lorem justo. Nulla mauris libero, dapibus a augue et, varius mollis nulla. Etiam iaculis convallis quam.
Nulla semper urna vel turpis blandit, in fermentum nunc lobortis. Ut varius dui ac enim fringilla condimentum. Vivamus
in condimentum leo. In ullamcorper lacus quam, elementum dictum elit scelerisque non. Pellentesque commodo augue imperdiet,
consequat ipsum ut, ultrices libero. Sed non suscipit nisl. Nam tristique vel ante in condimentum. Morbi et sem pharetra,
lacinia eros id, pulvinar enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elementum ipsum
ac scelerisque hendrerit. Ut tellus eros, aliquet sit amet aliquam et, rhoncus a eros. Donec ut felis ex. Maecenas lobortis
risus lacus, vitae vestibulum magna malesuada sit amet. Integer et magna pharetra, egestas lacus non, pretium nisl. Aenean
malesuada urna et neque tincidunt tincidunt. In orci ligula, efficitur ut sagittis eget, vestibulum a leo. Phasellus
convallis risus et elit sodales, vel sollicitudin arcu elementum. Nulla pretium orci sed aliquet feugiat. Fusce consequat
pretium aliquet. Pellentesque dapibus placerat euismod. Aenean eget orci eget enim vestibulum interdum. Donec non enim
vel lorem dapibus rhoncus sit amet vel risus. Nulla venenatis egestas mauris, et congue lectus. Etiam ac tristique risus.
Aliquam quis pretium nunc. Sed blandit hendrerit lacus, sit amet posuere velit sodales in. Praesent dapibus viverra turpis.
Nam auctor volutpat urna, luctus venenatis nulla venenatis eu. Quisque quis purus vitae lorem blandit elementum a dapibus
enim. Donec commodo lectus nec ante pulvinar fermentum. Etiam sodales ex sit amet dolor finibus suscipit. Maecenas luctus
placerat congue. Morbi eget viverra lacus. Vivamus ultricies augue at tincidunt luctus. Maecenas vel pretium purus, in
egestas nisi.
</div>
</body>
</html>
Estoy intentando crear una "navegación fuera del lienzo" para mi página. Cuando la navegación está abierta, quiero que el contenido del cuerpo no sea desplazable, pero todavía quiero poder desplazarme dentro del menú de navegación si se extiende más allá del área visible.
También quiero que el contenido del cuerpo permanezca en la misma posición cuando el menú está abierto (encontré una solución que me hizo agregar una position:fixed al cuerpo cuando el menú está abierto, pero esto hace que la página se desplace hacia la parte superior) .
$(function() {
$(''.menu-toggle'').click(function() {
$(''body'').toggleClass(''menu-open'');
});
});
body.menu-open {
overflow:hidden; /* this does not prevent scrolling in mobile safari */
}
.menu-toggle {
font-size:40px;
cursor:pointer;
}
nav {
background:#fff;
width:100%;
position:absolute;
left:-100%;
}
.menu-open nav {
left:0;
}
nav ul {
margin:0;
padding:0;
list-style-type:none;
}
nav ul li {
padding:20px 0 20px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<header>
<span class="menu-toggle">=</span>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
</ul>
</nav>
</header>
<div class="body-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna sollicitudin, tincidunt nisl sed, eleifend diam. Maecenas venenatis semper mauris. In faucibus congue sapien, ultrices efficitur ante pulvinar id. Duis eget egestas sem. Nullam tincidunt purus ut molestie dignissim. Nunc dictum elit arcu. Curabitur vitae magna tortor. Proin lacinia, nisi sit amet gravida pellentesque, orci neque tempor nunc, sit amet lobortis magna nulla id lorem.
Etiam suscipit massa ut diam sollicitudin fringilla ac ac mauris. Vestibulum pretium semper urna. Nulla risus nibh, sollicitudin eget volutpat sit amet, fermentum non enim. Praesent gravida metus in leo pharetra congue. Maecenas augue purus, malesuada tempor venenatis at, maximus at elit. Phasellus ipsum nunc, posuere eu metus in, mattis imperdiet sem. Duis non ultrices mi. Mauris nibh ex, varius vel ipsum vel, fermentum semper tellus. Integer fringilla fringilla pharetra. Vivamus eleifend rhoncus mi at iaculis. Proin suscipit lorem justo. Nulla mauris libero, dapibus a augue et, varius mollis nulla. Etiam iaculis convallis quam. Nulla semper urna vel turpis blandit, in fermentum nunc lobortis. Ut varius dui ac enim fringilla condimentum.
Vivamus in condimentum leo. In ullamcorper lacus quam, elementum dictum elit scelerisque non. Pellentesque commodo augue imperdiet, consequat ipsum ut, ultrices libero. Sed non suscipit nisl. Nam tristique vel ante in condimentum. Morbi et sem pharetra, lacinia eros id, pulvinar enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elementum ipsum ac scelerisque hendrerit. Ut tellus eros, aliquet sit amet aliquam et, rhoncus a eros.
Donec ut felis ex. Maecenas lobortis risus lacus, vitae vestibulum magna malesuada sit amet. Integer et magna pharetra, egestas lacus non, pretium nisl. Aenean malesuada urna et neque tincidunt tincidunt. In orci ligula, efficitur ut sagittis eget, vestibulum a leo. Phasellus convallis risus et elit sodales, vel sollicitudin arcu elementum. Nulla pretium orci sed aliquet feugiat. Fusce consequat pretium aliquet. Pellentesque dapibus placerat euismod. Aenean eget orci eget enim vestibulum interdum. Donec non enim vel lorem dapibus rhoncus sit amet vel risus. Nulla venenatis egestas mauris, et congue lectus. Etiam ac tristique risus.
Aliquam quis pretium nunc. Sed blandit hendrerit lacus, sit amet posuere velit sodales in. Praesent dapibus viverra turpis. Nam auctor volutpat urna, luctus venenatis nulla venenatis eu. Quisque quis purus vitae lorem blandit elementum a dapibus enim. Donec commodo lectus nec ante pulvinar fermentum. Etiam sodales ex sit amet dolor finibus suscipit. Maecenas luctus placerat congue. Morbi eget viverra lacus. Vivamus ultricies augue at tincidunt luctus. Maecenas vel pretium purus, in egestas nisi.
</div>
</body>
</html>
Cuando dispara el botón de abrir, podría tener desactivado el desplazamiento de javascript en el cuerpo y habilitarlo en el menú. Cuando se cierra el menú, se podría disparar lo contrario, al habilitar el desplazamiento en el cuerpo.
En el menú abierto:
$(".body-content").css({ overflow: "hidden" });
En el menú de cierre:
$(".body-content").css({ overflow: "auto" });
No estoy seguro de si esto es lo que desea, pero configuro su navegación para que se mantenga "fija" en la parte superior de su pantalla, y solo agregué un poco de jQuery en la navegación para desplazarse a diferentes secciones de la página.
$(function () {
$(''.menu-toggle'').on(''click touch'',function () {
$(''body'').toggleClass(''menu-open'');
});
$(''nav li'').on(''click touch'',function () {
var id = $(this).attr("id");
var temp = id.split("_");
id = temp[1];
$(''html, body'').animate({
scrollTop: $(''#'' + id).offset().top
}, 500);
$(''body'').toggleClass(''menu-open'');
});
});
header {
position: fixed !important;
z-index: 10;
background-color: #FFF;
display: block;
width:100%;
top:0px;
}
.body-content{
}
body.menu-open {
overflow: hidden; /* this does not prevent scrolling in mobile safari */
}
.menu-toggle {
font-size: 40px;
cursor: pointer;
}
nav {
background: #fff;
width: 100%;
position: fixed;
left: -100%;
}
.menu-open nav {
left: 0;
overflow-y:scroll;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav ul li {
padding: 20px 0 20px 10px;
}
.body-content {
padding-top:20px;
position:relative;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<header>
<span class="menu-toggle">=</span>
<nav>
<ul>
<li id="to_loc1">Link 1</li>
<li id="to_loc2">Link 2</li>
<li id="to_loc3">Link 3</li>
<li id="to_loc4">Link 4</li>
<li id="to_loc5">Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
</ul>
</nav>
</header>
<div class="body-content">
<div id="loc1"><h1>Section 1 </h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna sollicitudin, tincidunt nisl sed, eleifend diam. Maecenas venenatis semper mauris. In faucibus congue sapien, ultrices efficitur ante pulvinar id. Duis eget egestas sem. Nullam tincidunt purus ut molestie dignissim. Nunc dictum elit arcu. Curabitur vitae magna tortor. Proin lacinia, nisi sit amet gravida pellentesque, orci neque tempor nunc, sit amet lobortis magna nulla id lorem.</div>
<div id="loc2"><h1>Section 2 </h1>Etiam suscipit massa ut diam sollicitudin fringilla ac ac mauris. Vestibulum pretium semper urna. Nulla risus nibh, sollicitudin eget volutpat sit amet, fermentum non enim. Praesent gravida metus in leo pharetra congue. Maecenas augue purus, malesuada tempor venenatis at, maximus at elit. Phasellus ipsum nunc, posuere eu metus in, mattis imperdiet sem. Duis non ultrices mi. Mauris nibh ex, varius vel ipsum vel, fermentum semper tellus. Integer fringilla fringilla pharetra. Vivamus eleifend rhoncus mi at iaculis. Proin suscipit lorem justo. Nulla mauris libero, dapibus a augue et, varius mollis nulla. Etiam iaculis convallis quam. Nulla semper urna vel turpis blandit, in fermentum nunc lobortis. Ut varius dui ac enim fringilla condimentum.</div>
<div id="loc3"><h1>Section 3 </h1>Vivamus in condimentum leo. In ullamcorper lacus quam, elementum dictum elit scelerisque non. Pellentesque commodo augue imperdiet, consequat ipsum ut, ultrices libero. Sed non suscipit nisl. Nam tristique vel ante in condimentum. Morbi et sem pharetra, lacinia eros id, pulvinar enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elementum ipsum ac scelerisque hendrerit. Ut tellus eros, aliquet sit amet aliquam et, rhoncus a eros.</div>
<div id="loc4"><h1>Section 4 </h1>Donec ut felis ex. Maecenas lobortis risus lacus, vitae vestibulum magna malesuada sit amet. Integer et magna pharetra, egestas lacus non, pretium nisl. Aenean malesuada urna et neque tincidunt tincidunt. In orci ligula, efficitur ut sagittis eget, vestibulum a leo. Phasellus convallis risus et elit sodales, vel sollicitudin arcu elementum. Nulla pretium orci sed aliquet feugiat. Fusce consequat pretium aliquet. Pellentesque dapibus placerat euismod. Aenean eget orci eget enim vestibulum interdum. Donec non enim vel lorem dapibus rhoncus sit amet vel risus. Nulla venenatis egestas mauris, et congue lectus. Etiam ac tristique risus.</div>
<div id="loc5"><h1>Section 5 </h1>Aliquam quis pretium nunc. Sed blandit hendrerit lacus, sit amet posuere velit sodales in. Praesent dapibus viverra turpis. Nam auctor volutpat urna, luctus venenatis nulla venenatis eu. Quisque quis purus vitae lorem blandit elementum a dapibus enim. Donec commodo lectus nec ante pulvinar fermentum. Etiam sodales ex sit amet dolor finibus suscipit. Maecenas luctus placerat congue. Morbi eget viverra lacus. Vivamus ultricies augue at tincidunt luctus. Maecenas vel pretium purus, in egestas nisi.</div>
</div>
</body>
</html>
Para mi sitio web lo siguiente funcionó solo encontrarlo. Sin embargo, es importante tener en cuenta que no debe establecer una altura para el body con este método, por ejemplo, no height: 100% para body.menu-open , de lo contrario saltará a la parte superior cada vez que se abra el navegador.
body.menu-open{
overflow: hidden;
}
.menu-open nav{
overflow: auto;
}
Y luego, por supuesto, recuerda tus otros estilos :)
Solo agrega esto a css
.menu-open header nav {
height: 100vh;
overflow: auto;
}
esto hará que la navegación sea al 100% y habilitará el desplazamiento hacia ella. Si desea que sea 100% de altura solo en dispositivos móviles, simplemente póngalo en una consulta @media
Ya que tiene su contenido en un div, puede ocultarlo cuando el menú está abierto
Aquí hay un ejemplo de trabajo.
$(function() {
$(''.menu-toggle'').click(function() {
$(''body'').toggleClass(''menu-open'');
});
});
.menu-open .body-content {
/* Hide content when menu is open */
height: 0;
overflow: hidden;
}
.menu-toggle {
font-size: 40px;
cursor: pointer;
}
nav {
background: #fff;
width: 100%;
position: absolute;
left: -100%;
}
.menu-open nav {
left: 0;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav ul li {
padding: 20px 0 20px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<span class="menu-toggle">=</span>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
</ul>
</nav>
</header>
<div class="body-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna sollicitudin, tincidunt nisl sed, eleifend diam. Maecenas venenatis semper mauris. In faucibus congue sapien, ultrices efficitur ante pulvinar id. Duis eget egestas sem. Nullam tincidunt
purus ut molestie dignissim. Nunc dictum elit arcu. Curabitur vitae magna tortor. Proin lacinia, nisi sit amet gravida pellentesque, orci neque tempor nunc, sit amet lobortis magna nulla id lorem. Etiam suscipit massa ut diam sollicitudin fringilla
ac ac mauris. Vestibulum pretium semper urna. Nulla risus nibh, sollicitudin eget volutpat sit amet, fermentum non enim. Praesent gravida metus in leo pharetra congue. Maecenas augue purus, malesuada tempor venenatis at, maximus at elit. Phasellus ipsum
nunc, posuere eu metus in, mattis imperdiet sem. Duis non ultrices mi. Mauris nibh ex, varius vel ipsum vel, fermentum semper tellus. Integer fringilla fringilla pharetra. Vivamus eleifend rhoncus mi at iaculis. Proin suscipit lorem justo. Nulla mauris
libero, dapibus a augue et, varius mollis nulla. Etiam iaculis convallis quam. Nulla semper urna vel turpis blandit, in fermentum nunc lobortis. Ut varius dui ac enim fringilla condimentum. Vivamus in condimentum leo. In ullamcorper lacus quam, elementum
dictum elit scelerisque non. Pellentesque commodo augue imperdiet, consequat ipsum ut, ultrices libero. Sed non suscipit nisl. Nam tristique vel ante in condimentum. Morbi et sem pharetra, lacinia eros id, pulvinar enim. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Suspendisse elementum ipsum ac scelerisque hendrerit. Ut tellus eros, aliquet sit amet aliquam et, rhoncus a eros. Donec ut felis ex. Maecenas lobortis risus lacus, vitae vestibulum magna malesuada sit amet. Integer et magna
pharetra, egestas lacus non, pretium nisl. Aenean malesuada urna et neque tincidunt tincidunt. In orci ligula, efficitur ut sagittis eget, vestibulum a leo. Phasellus convallis risus et elit sodales, vel sollicitudin arcu elementum. Nulla pretium orci
sed aliquet feugiat. Fusce consequat pretium aliquet. Pellentesque dapibus placerat euismod. Aenean eget orci eget enim vestibulum interdum. Donec non enim vel lorem dapibus rhoncus sit amet vel risus. Nulla venenatis egestas mauris, et congue lectus.
Etiam ac tristique risus. Aliquam quis pretium nunc. Sed blandit hendrerit lacus, sit amet posuere velit sodales in. Praesent dapibus viverra turpis. Nam auctor volutpat urna, luctus venenatis nulla venenatis eu. Quisque quis purus vitae lorem blandit
elementum a dapibus enim. Donec commodo lectus nec ante pulvinar fermentum. Etiam sodales ex sit amet dolor finibus suscipit. Maecenas luctus placerat congue. Morbi eget viverra lacus. Vivamus ultricies augue at tincidunt luctus. Maecenas vel pretium
purus, in egestas nisi.
</div>