Witam
Jak zrobić taki efekt menu jak maja demotywatory? Czyli gdy strona się otwiera jest normalne menu, ale gdy zaczynamy przewijać ono się zwęża na odpowiedniej wysokości i zatrzymuje o góry (position:fixed).
Z góry dzięki za pomoc i ewentualny przykład.
Pełna wersja: menu - efekt zatrzymania na odpowiedniej wysokości
troszkę niepedagogiczny przykład, ale idą Święta ...
Pozdrawiam
Scalak
Kod
<html>
<head>
<script>
var zm=false;
window.onscroll = function (event) {
var ida=document.getElementById('a');
var idb=document.getElementById('b');
var idc=document.getElementById('c');
if(zm==false && document.body.scrollTop>=parseInt(window.getComputedStyle(ida).height)){
zm=true
ida.style.position="fixed";
idb.style.position="fixed";
ida.style.top="-50px";
idb.style.top="0px";
idc.style.paddingTop="100px";
}else if(zm==true && document.body.scrollTop<parseInt(window.getComputedStyle(ida).height)){
zm=false
ida.style.position="relative";
idb.style.position="relative";
ida.style.top="0px";
idb.style.top="0px";
idc.style.paddingTop="0px";
}
}
</script>
<style>
body{
margin:0 auto;
}
div{
text-align:center;
width:100%;
}
#a{
height:50px;
}
#b{
height:50px;
background-color:pink;
}
#c{
height:1000px;
}
</style>
</head>
<body>
<div>
<div id='a'>BLA BLA BLA</div>
<div id='b'>POZOSTAŃ
!</div>
<div id='c'>
Lorem ipsum dolor sit amet metus sed enim. Suspendisse eu tempor scelerisque, dui non neque dui, non eros. Sed sit amet leo. In hac habitasse platea dictumst. Nulla dignissim tempor, ligula condimentum ante pulvinar eget, neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per conubia nostra, per inceptos hymenaeos. Sed in velit cursus sapien. Aenean ullamcorper risus. Etiam hendrerit risus. Sed aliquet lacinia aliquet elit sed nunc. Fusce sed felis sed wisi id ultrices fringilla mauris. Aenean dictum eu, purus. Sed posuere sed, dui. Lorem ipsum in faucibus condimentum tempor, pulvinar sed, imperdiet quis, lacinia aliquet commodo magna, scelerisque a, sollicitudin vitae, nibh. Morbi pede. Pellentesque suscipit sit amet, tortor. Suspendisse turpis egestas. Suspendisse quis turpis. Nullam accumsan. Nullam accumsan. In bibendum iaculis ornare. Nam sed sem. Etiam ullamcorper. Suspendisse ac lectus. Nam cursus, mi risus, pellentesque consectetuer, augue mi, eu libero. Nullam at ultrices posuere eu, elit. Curabitur vitae nibh wisi, dapibus sit amet lacus. Pellentesque tortor. Nulla mi id dolor gravida gravida sodales. Quisque lorem tortor lacus tellus tincidunt luctus. Phasellus vulputate a, diam. Morbi.
Morbi a dolor. Vestibulum scelerisque odio nec tellus. Vestibulum metus nisl, tristique magna. Nulla dolor nulla, convallis accumsan, libero quis dui. Integer pharetra vel, eros. Quisque neque eu justo. Suspendisse ac orci ipsum, congue arcu. Sed vehicula ut, pulvinar enim non purus. Proin cursus lectus, viverra diam leo sed felis. Phasellus ut orci luctus eu, dapibus in, vulputate tortor a leo. Nulla facilisi. Phasellus in turpis quis tortor. In euismod mi. Cras non nunc. Suspendisse sollicitudin. Nullam libero wisi, mollis aliquam, libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur interdum. Quisque urna. Cras non enim quis massa non neque magna ut sem. Sed congue, lacus non nibh. Donec nunc. Vivamus est. Sed fringilla orci. Nunc a metus. Curabitur magna non ipsum. Aliquam erat metus nisl at justo. In hac habitasse platea dictumst. Suspendisse et ultrices velit eros sagittis porta, est dolor, placerat sodales. Phasellus purus. Pellentesque scelerisque sem. Etiam at eros. Vestibulum id ultrices bibendum, sem vitae metus. Quisque porta ligula tempor nisl nulla vitae velit libero at nulla in faucibus sit amet, ligula.
Aliquam commodo porta. Quisque vehicula viverra. Ut id fringilla enim. Aliquam nec mauris vitae metus. In hac habitasse platea dictumst. Maecenas wisi. Nam rhoncus, dolor leo ut tortor. Maecenas tortor mauris, interdum mi ligula, et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sed eros nisl, semper risus. Morbi ultrices posuere, odio. Nunc gravida. In purus sit amet neque vitae massa. Maecenas orci lorem sit amet, nonummy sed, viverra elit. Integer ac ipsum. Praesent in sollicitudin arcu. In vehicula libero. Mauris ultrices. Sed gravida justo, posuere orci vel urna tellus felis sed justo a lectus. Nunc mollis, turpis viverra semper eu, dapibus eget, cursus wisi, tempor nisl nulla id ligula. Donec mauris magna, fermentum sem nunc, dapibus sit amet, consectetuer congue vel, congue eu, cursus wisi augue id eros. Aliquam erat consectetuer eget, eros. Sed orci luctus et malesuada leo nec diam placerat at, porttitor elementum. Nam sit amet, elementum nulla. Curabitur vel dui vitae mauris. Aliquam gravida non, tempor venenatis eu, pulvinar sem pede interdum arcu congue porta, metus semper vel, massa. Phasellus tempor auctor, sapien faucibus at, suscipit.
Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Sed eros. Nullam volutpat, libero mollis neque gravida turpis. Fusce non diam. Morbi mattis vel, wisi. Phasellus lacinia dignissim, lorem lectus, volutpat tempus rutrum ac, suscipit mauris. Etiam sapien eu bibendum vel, semper eu, tempor et, justo. Vestibulum id nibh. Donec euismod scelerisque arcu. In gravida sem. Sed nibh wisi, dapibus non, sagittis lorem. Aliquam feugiat sagittis porttitor. Maecenas mi mauris, adipiscing sollicitudin. Cras porta, metus semper et, mollis eu, tellus. Cras dictum suscipit erat. Aenean ut viverra auctor, tempor lorem. Suspendisse bibendum vel, sapien. Aliquam faucibus eu, tortor. Vivamus sed tortor. Proin id nisl neque quis dui. Cras vitae arcu sed tortor. In molestie egestas, nulla in ultricies a, condimentum odio et felis. Mauris ornare non, dolor. Sed dignissim. Donec facilisis nec, bibendum arcu erat eget gravida tellus tortor, dictum a, laoreet commodo, est a odio. Aenean vel nulla. Fusce eu lacus. Nulla posuere. Vestibulum nibh purus, congue orci mauris consequat faucibus, tortor venenatis consequat. Nulla massa. Proin luctus. Sed placerat at, suscipit vitae, mollis neque gravida sagittis. Lorem.
</div>
</div>
</body>
<head>
<script>
var zm=false;
window.onscroll = function (event) {
var ida=document.getElementById('a');
var idb=document.getElementById('b');
var idc=document.getElementById('c');
if(zm==false && document.body.scrollTop>=parseInt(window.getComputedStyle(ida).height)){
zm=true
ida.style.position="fixed";
idb.style.position="fixed";
ida.style.top="-50px";
idb.style.top="0px";
idc.style.paddingTop="100px";
}else if(zm==true && document.body.scrollTop<parseInt(window.getComputedStyle(ida).height)){
zm=false
ida.style.position="relative";
idb.style.position="relative";
ida.style.top="0px";
idb.style.top="0px";
idc.style.paddingTop="0px";
}
}
</script>
<style>
body{
margin:0 auto;
}
div{
text-align:center;
width:100%;
}
#a{
height:50px;
}
#b{
height:50px;
background-color:pink;
}
#c{
height:1000px;
}
</style>
</head>
<body>
<div>
<div id='a'>BLA BLA BLA</div>
<div id='b'>POZOSTAŃ
!</div><div id='c'>
Lorem ipsum dolor sit amet metus sed enim. Suspendisse eu tempor scelerisque, dui non neque dui, non eros. Sed sit amet leo. In hac habitasse platea dictumst. Nulla dignissim tempor, ligula condimentum ante pulvinar eget, neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per conubia nostra, per inceptos hymenaeos. Sed in velit cursus sapien. Aenean ullamcorper risus. Etiam hendrerit risus. Sed aliquet lacinia aliquet elit sed nunc. Fusce sed felis sed wisi id ultrices fringilla mauris. Aenean dictum eu, purus. Sed posuere sed, dui. Lorem ipsum in faucibus condimentum tempor, pulvinar sed, imperdiet quis, lacinia aliquet commodo magna, scelerisque a, sollicitudin vitae, nibh. Morbi pede. Pellentesque suscipit sit amet, tortor. Suspendisse turpis egestas. Suspendisse quis turpis. Nullam accumsan. Nullam accumsan. In bibendum iaculis ornare. Nam sed sem. Etiam ullamcorper. Suspendisse ac lectus. Nam cursus, mi risus, pellentesque consectetuer, augue mi, eu libero. Nullam at ultrices posuere eu, elit. Curabitur vitae nibh wisi, dapibus sit amet lacus. Pellentesque tortor. Nulla mi id dolor gravida gravida sodales. Quisque lorem tortor lacus tellus tincidunt luctus. Phasellus vulputate a, diam. Morbi.
Morbi a dolor. Vestibulum scelerisque odio nec tellus. Vestibulum metus nisl, tristique magna. Nulla dolor nulla, convallis accumsan, libero quis dui. Integer pharetra vel, eros. Quisque neque eu justo. Suspendisse ac orci ipsum, congue arcu. Sed vehicula ut, pulvinar enim non purus. Proin cursus lectus, viverra diam leo sed felis. Phasellus ut orci luctus eu, dapibus in, vulputate tortor a leo. Nulla facilisi. Phasellus in turpis quis tortor. In euismod mi. Cras non nunc. Suspendisse sollicitudin. Nullam libero wisi, mollis aliquam, libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur interdum. Quisque urna. Cras non enim quis massa non neque magna ut sem. Sed congue, lacus non nibh. Donec nunc. Vivamus est. Sed fringilla orci. Nunc a metus. Curabitur magna non ipsum. Aliquam erat metus nisl at justo. In hac habitasse platea dictumst. Suspendisse et ultrices velit eros sagittis porta, est dolor, placerat sodales. Phasellus purus. Pellentesque scelerisque sem. Etiam at eros. Vestibulum id ultrices bibendum, sem vitae metus. Quisque porta ligula tempor nisl nulla vitae velit libero at nulla in faucibus sit amet, ligula.
Aliquam commodo porta. Quisque vehicula viverra. Ut id fringilla enim. Aliquam nec mauris vitae metus. In hac habitasse platea dictumst. Maecenas wisi. Nam rhoncus, dolor leo ut tortor. Maecenas tortor mauris, interdum mi ligula, et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sed eros nisl, semper risus. Morbi ultrices posuere, odio. Nunc gravida. In purus sit amet neque vitae massa. Maecenas orci lorem sit amet, nonummy sed, viverra elit. Integer ac ipsum. Praesent in sollicitudin arcu. In vehicula libero. Mauris ultrices. Sed gravida justo, posuere orci vel urna tellus felis sed justo a lectus. Nunc mollis, turpis viverra semper eu, dapibus eget, cursus wisi, tempor nisl nulla id ligula. Donec mauris magna, fermentum sem nunc, dapibus sit amet, consectetuer congue vel, congue eu, cursus wisi augue id eros. Aliquam erat consectetuer eget, eros. Sed orci luctus et malesuada leo nec diam placerat at, porttitor elementum. Nam sit amet, elementum nulla. Curabitur vel dui vitae mauris. Aliquam gravida non, tempor venenatis eu, pulvinar sem pede interdum arcu congue porta, metus semper vel, massa. Phasellus tempor auctor, sapien faucibus at, suscipit.
Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Sed eros. Nullam volutpat, libero mollis neque gravida turpis. Fusce non diam. Morbi mattis vel, wisi. Phasellus lacinia dignissim, lorem lectus, volutpat tempus rutrum ac, suscipit mauris. Etiam sapien eu bibendum vel, semper eu, tempor et, justo. Vestibulum id nibh. Donec euismod scelerisque arcu. In gravida sem. Sed nibh wisi, dapibus non, sagittis lorem. Aliquam feugiat sagittis porttitor. Maecenas mi mauris, adipiscing sollicitudin. Cras porta, metus semper et, mollis eu, tellus. Cras dictum suscipit erat. Aenean ut viverra auctor, tempor lorem. Suspendisse bibendum vel, sapien. Aliquam faucibus eu, tortor. Vivamus sed tortor. Proin id nisl neque quis dui. Cras vitae arcu sed tortor. In molestie egestas, nulla in ultricies a, condimentum odio et felis. Mauris ornare non, dolor. Sed dignissim. Donec facilisis nec, bibendum arcu erat eget gravida tellus tortor, dictum a, laoreet commodo, est a odio. Aenean vel nulla. Fusce eu lacus. Nulla posuere. Vestibulum nibh purus, congue orci mauris consequat faucibus, tortor venenatis consequat. Nulla massa. Proin luctus. Sed placerat at, suscipit vitae, mollis neque gravida sagittis. Lorem.
</div>
</div>
</body>
Pozdrawiam
Scalak
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.