There are lots of sticky header tutorials all over the net but none of them suits mi requirement. Here is the description I need:
Reference: Facebook has the same menu. it is only visible when it is scrolled to a certain height.
Anybody, please help me out.
Thanks.
我想这可以帮助你 摆弄
js: var header = document.querySelector('.header'); var origOffsetY = header.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? header.classList.add('sticky') :
header.classList.remove('sticky');
}
document.addEventListener('scroll', onScroll);
html:
<div class="header">MENU</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices venenatis lectus, eget dignissim nunc rhoncus nec. Pellentesque mattis imperdiet sem, et dictum dolor auctor nec. Quisque egestas odio vel mi tempus ornare. Curabitur vehicula, ipsum a laoreet sodales, metus purus faucibus lacus, vel tincidunt leo nibh in sapien. Fusce non consectetur lorem. Aliquam congue enim ut diam sagittis cursus. Sed eu augue nec turpis convallis sodales in et mi. Ut porttitor suscipit mattis. Maecenas bibendum malesuada enim, nec mollis nibh faucibus at. Suspendisse lacinia leo at augue eleifend porttitor. Aliquam erat volutpat.
Phasellus dolor mauris, malesuada sed imperdiet vel, rhoncus in nisi. Quisque viverra neque sit amet leo molestie ornare. Praesent ultricies mi eu odio pretium rutrum. Nunc feugiat venenatis odio eu placerat. Mauris imperdiet vehicula magna quis pulvinar. Proin nec leo quis arcu viverra malesuada. Nam at enim vitae magna molestie varius. In vulputate erat at tellus iaculis sed tristique mauris molestie. Maecenas vitae purus porta elit convallis malesuada. Nam eu lectus ut elit molestie ornare non vitae mauris. Pellentesque ipsum ligula, congue ac ultricies ut, posuere non arcu. Morbi nec ligula sed libero porttitor convallis vel id lorem. Nulla facilisi. Nulla imperdiet ullamcorper metus in viverra. Maecenas erat purus, faucibus ut consectetur ut, dignissim id leo. Ut cursus consectetur quam.
Cras dui erat, gravida sit amet posuere nec, viverra id nisl. Vivamus justo libero, placerat in luctus nec, imperdiet ut nisi. Vestibulum vehicula tristique lorem a fringilla. Proin eu vulputate leo. Nullam quis sapien quis metus egestas pretium. Aliquam ut tincidunt erat. Duis eros lectus, eleifend et fringilla et, sollicitudin a sem. Ut eu lacus sapien, ac dignissim nibh. Pellentesque velit orci, sodales sit amet dictum in, luctus eu sapien.
Curabitur elementum accumsan accumsan. Maecenas et turpis quam. Fusce quis metus quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vel ultrices nisi. Praesent non arcu sit amet ligula venenatis ornare et vel mauris. Curabitur mauris mi, ultricies quis posuere vitae, egestas et lectus. Fusce lectus tortor, bibendum vel bibendum quis, dictum eu sem. In rhoncus nunc id massa tincidunt luctus. Integer hendrerit sem lectus.
In interdum lacus ut urna rhoncus eget suscipit dolor iaculis. Duis commodo enim porttitor ipsum lacinia hendrerit. Proin sem massa, convallis sit amet lacinia non, dapibus ut lacus. Proin fermentum, enim vitae vulputate ullamcorper, eros massa convallis purus, nec fermentum odio lorem sit amet nunc. Proin nec lacus lacus. Quisque rhoncus neque quis lacus lobortis lacinia. Sed congue justo ut nisl ornare vulputate.
Ut pellentesque, justo eget sodales dignissim, nunc ligula aliquam tortor, ac lobortis velit ante fringilla arcu. Nunc pretium commodo varius. Integer condimentum ante a elit vestibulum vestibulum. Integer at sagittis nibh. Nunc a neque est. Curabitur volutpat ante eget massa sagittis placerat. Duis quis neque in mi hendrerit interdum malesuada sed sapien. Nullam consequat, dolor feugiat scelerisque consequat, lorem nisl tristique neque, sed euismod metus metus sit amet orci. Nulla euismod leo quis sapien commodo sit amet venenatis purus pulvinar. Nunc at elit quis magna tincidunt sagittis a id nibh. Suspendisse fermentum justo nisi, et rhoncus urna. Sed ut mi nec augue commodo tristique eu vel urna. Nunc mattis orci quis lorem lacinia in sollicitudin ligula laoreet. Sed sed nisi sit amet odio sollicitudin mattis.
Fusce rutrum massa vel mauris facilisis gravida. Fusce venenatis tincidunt dui ac ullamcorper. Fusce a viverra diam. Nulla ultricies vulputate ultricies. Curabitur eget suscipit arcu. Praesent ac augue odio, vestibulum sodales lacus. Etiam ac tortor eu est adipiscing dictum at vel enim. Mauris convallis ante at purus rutrum gravida. Praesent condimentum, sem vel lacinia tristique, ante neque dignissim tellus, eget malesuada nisl erat in leo. Donec et venenatis ante. Proin fringilla luctus leo ac bibendum. Curabitur tristique, urna et dignissim molestie, ligula nulla egestas elit, in facilisis orci elit a dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse ac mauris vel ante tincidunt suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Suspendisse metus orci, elementum vitae accumsan eu, rhoncus sit amet magna. Integer viverra massa eget nunc sagittis porta. In lobortis vestibulum sem, sed interdum magna molestie non. Phasellus magna enim, adipiscing et venenatis vitae, sodales id nisi. Praesent non sapien odio. Praesent at magna diam. Integer sed sapien et augue tincidunt feugiat vitae vel nunc. Suspendisse egestas velit commodo odio fermentum cursus. Morbi nulla neque, luctus a pharetra ac, mollis ut mauris. Pellentesque euismod consectetur posuere.
Nam suscipit nisl libero, eget elementum odio. Pellentesque blandit, nisi eu hendrerit bibendum, metus odio blandit arcu, a mattis sapien nunc a mauris. In iaculis, turpis a interdum fermentum, tortor magna auctor est, nec molestie massa mi et diam. Etiam pretium, libero id pretium ultricies, dui augue molestie turpis, eget tristique justo dolor at nisi. Duis sed suscipit lacus. Vivamus nunc quam, elementum ornare bibendum sit amet, pharetra vitae tellus. Nullam non nibh quis augue interdum cursus. Aliquam vehicula tempus imperdiet.
Aliquam dignissim elementum nibh. Aliquam in dolor non augue blandit venenatis et adipiscing ante. Mauris at convallis mauris. Cras sapien odio, rhoncus quis ultricies at, aliquam fermentum sem. Proin quis aliquam lorem. Nullam convallis quam ac diam porttitor dictum. Mauris vitae erat orci, ut rhoncus odio. Integer dui nunc, gravida vitae molestie vel, pharetra a tortor. Suspendisse potenti. Duis vestibulum posuere vehicula.
Donec sapien libero, malesuada ut condimentum placerat, dapibus eget metus. Aenean pellentesque, nisl sed mollis tempus, justo lectus suscipit lorem, vitae semper turpis odio mattis tellus. Nulla iaculis varius convallis. In hac habitasse platea dictumst. Nunc tempor nisi porta nunc pharetra ut gravida enim viverra. Nulla et quam erat, id mollis dui. Praesent pulvinar elit sed justo cursus quis scelerisque libero viverra. Proin velit ligula, cursus ac suscipit et, porta vitae diam. Curabitur fermentum justo sed turpis venenatis ut volutpat purus volutpat. Nulla tincidunt elit vel nisi ornare convallis. Praesent adipiscing aliquam quam, ut imperdiet tortor blandit vitae. Nullam ut neque quis sem fermentum sollicitudin vitae vitae arcu. Curabitur sit amet leo arcu, non viverra tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi interdum pellentesque ultricies.
Donec congue mauris eget dolor facilisis eu dapibus purus auctor. Etiam ut urna ut sapien hendrerit lacinia. Nulla et odio sed urna faucibus sodales eget eu quam. Etiam convallis eros bibendum erat commodo adipiscing. Sed viverra lorem sollicitudin mauris consectetur hendrerit lacinia lacus adipiscing. Aliquam suscipit sagittis elit, quis molestie risus adipiscing vitae. Donec sed consequat mauris. Nunc sit amet mauris erat, eget vulputate lorem. Quisque volutpat mollis eros non lacinia. Nulla consectetur, quam quis ullamcorper sodales, nulla felis tempus nisl, sed ultrices ipsum nibh in velit. Vestibulum interdum facilisis arcu in ultrices. Sed dictum posuere porttitor. Maecenas enim elit, convallis sed faucibus ut, euismod aliquet metus. Nulla iaculis tempor justo, nec mollis orci sodales non.
Vestibulum et dui est. Proin feugiat aliquam nibh in malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sodales neque ut mauris pharetra vel euismod quam congue. Proin venenatis, mauris nec suscipit dictum, leo lorem adipiscing arcu, pretium pretium orci velit non tortor. Nunc tincidunt vehicula diam, ut iaculis mauris accumsan vitae.
Ut ut orci non felis lacinia elementum. Nam ultrices, dui at mollis mattis, justo lectus tristique est, in tempor eros lectus sed eros. Cras at mauris felis. In tempus vehicula neque, et luctus nisi blandit id. Donec vel vulputate mi. Quisque ac varius nisl. In eget dolor nec turpis vulputate auctor.
Donec pulvinar, metus et consectetur eleifend, neque nisi blandit tortor, at eleifend arcu odio at nisl. Nam fermentum aliquet odio, in euismod neque consequat vitae. Nunc purus augue, ultricies ut mattis ut, molestie ullamcorper risus. In varius, tortor ac iaculis interdum, lacus metus pharetra ipsum, vel egestas justo diam quis purus. Integer sem purus, vehicula quis molestie a, semper vel eros. Duis sagittis massa at lorem posuere quis sodales magna blandit. Duis vel turpis eu ipsum posuere egestas quis eu leo. Etiam vitae lectus mauris. Vivamus laoreet nisi at nisi dictum vulputate.
</div>