我希望当我向上滚动时,页面标题也会上升,但在滚动位置150之后,它将平滑向下滑动并固定在顶部。我尝试了许多方法,但并未真正获得正确的结果。大家能看一下我的代码吗?
像这样的http://cssdeck.com/labs/sticky-header-with-slide-down-effect这个脚本有一些故障。
jQuery(document).ready(function ($) {
$(window).scroll(function () {
if ($(window).scrollTop() >= 100) {
$('.navarea').addClass('fixed-header');
} else {
$('.navarea').removeClass('fixed-header');
}
});
});
这是CSS
.navarea {
z-index: 2;
background: rgba(255, 255, 255, 0.9);
transition: all 0.5s ease-in-out;
}
.fixed-header {
position: fixed;
background: rgba(255, 255, 255, 0.9);
text-shadow: none;
padding-bottom: 0;
top: 0;
z-index: 5;
transition: all 0.5s ease-in-out;
}
实时网址:
https://codepen.io/pagol/pen/XovvGJ
最佳答案
这是一个例子
创建导航元素的深层克隆(其他解决方案经过大量测试后仍存在问题)
使用CSS3 transition
进行克隆导航
使用反跳回调机制来利用滚动触发的功能
将position sticky
和visibility
用于原始元素以改善效果
// https://github.com/micro-js/debounce/blob/master/lib/index.js
function debounce(fn, time) {
var pending = null
return function() {
if (pending) clearTimeout(pending)
pending = setTimeout(run, time)
return function() {
clearTimeout(pending)
pending = null
}
}
function run() {
pending = null
fn()
}
}
function documentScrollTop() {
const doc = document.documentElement;
return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
}
const el_nav1 = document.getElementById("nav");
const el_nav2 = el_nav1.cloneNode(true);
el_nav1.parentNode.insertBefore(el_nav2, el_nav1);
el_nav2.style.cssText = `position:fixed; transform:translateY(-100%);`;
function animateNavigation() {
const canShow = documentScrollTop() >= 150;
el_nav2.style.transform = `translateY(${canShow?0:-100}%)`;
el_nav1.style.cssText = `position:${canShow?'sticky':'relative'}; visibility:${canShow?'hidden':'visible'};`
}
window.addEventListener('scroll', debounce(animateNavigation, 99));
document.addEventListener('DOMContentLoaded', animateNavigation);
/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}
p {height:300vh;border:4px dashed #000;} /* force scrollbars */
#nav {
position: relative;
top: 0;
width: 100%;
padding: 20px;
background: gold;
transition: transform 0.6s;
}
<nav id="nav">NAVIGATION HERE</nav>
<p></p>
有待改进
尝试仅使用一个元素(在这里很难滚动到顶部...)
在
animateNavigation
函数内使用一个附加条件来测试是否已执行某项操作(以防止在style
切换到新的布尔值之前对canShow
的附加调用)关于jquery - 具有向下滑动效果的粘页眉,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/54279860/