基于jquery固定于顶部的导航响应浏览器滚动条事件_jquery
程序员文章站
2022-03-31 13:06:43
...
今天给大家分享一款基于jquery固定于顶部的导航,这款导航当浏览器滚动条位于顶部时,导航高度较高,当浏览器滚动向下滚动时,导航高度自动减低,并位于顶部。效果图如下:
实现的代码:
html代码:
Page TitleContent goes here!Content goes here!Content goes here!Content goes here!Content goes here!Content goes here!Content goes here!
css代码:
html, body { background: #fafafa; color: #1BBBFB; font-family: sans-serif; } #page { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } #toolbar { display: block; position: fixed; width: 100%; z-index: 10; box-sizing: border-box; -moz-box-sizing: border-box; background-color: #1BBBFB; padding: 0 16px; } #actions { position: relative; display: flex; align-items: center; flex-direction: row; height: 64px; top: 0; left: 0; right 0; } #actions .icon { padding: 7px; margin: 2px; vertical-align: middle; } #actions .spacer { flex: 1; } #actions svg { display: inline-block; pointer-events: none; position: relative; vertical-align: middle; width: 24px; height: 24px; fill: #fff; } #title { padding: 21px; position: absolute; bottom: 0; color: #fff; } #content { display: block; position: relative; padding: 24px; } .card { display: block; position: relative; width: 60%; height: 100px; border: 1px solid #1BBBFB; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #fff; margin: 16px auto; padding: 24px; }