gpt4 book ai didi

jquery - 创建一个固定的导航,在滚动一小段距离后滑开并在向上滚动时返回

转载 作者:太空宇宙 更新时间:2023-11-04 13:06:33 26 4
gpt4 key购买 nike

我正在尝试创建一个固定导航,它会在用户向下滚动一小段距离后滑开,然后在向上滚动后返回到固定 View 。下面的代码在一定程度上有效但跳跃,没有在导航中上下滚动时获得的平滑幻灯片:

http://www.advancedcustomfields.com/

$(document).ready(function() {
var previousScroll = 0,
headerOrgOffset = $('.nav').offset().top;

$(window).scroll(function() {
var currentScroll = $(this).scrollTop();
console.log(currentScroll + " and " + previousScroll + " and " + headerOrgOffset);
if(currentScroll > headerOrgOffset) {
if (currentScroll > previousScroll) {
$('.nav').fadeOut();
} else {
$('.nav').fadeIn();
$('.nav').addClass('scrolling');
$('.anchor').addClass('anchorpaddingtop');
}
} else {
$('.anchor').removeClass('anchorpaddingtop');
$('.nav').removeClass('scrolling');
}
previousScroll = currentScroll;
});
});

我的示例位于 http://sandbox.jonathanbeech.co.uk/

最佳答案

像这样:

Playground - http://codepen.io/vsync/pen/GdLlK

(function(){
$(window).on('scroll.getDirection', getScrollDirection);

var lastScrollTop = '',
sticky = $('#header'),
stickyH = sticky.height(),
sensetivity = 16, // lower is more sensetive
stickyPos = 0,
lastDownPos, delta, st;

function getScrollDirection(){
st = window.pageYOffset || document.documentElement.scrollTop;

if( st > lastScrollTop ){ // && sticky.hasClass('sticky')
// console.log( 'down' );

if( stickyPos <= -stickyH && sticky.hasClass('sticky') ){
stickyPos = -stickyH;
sticky.removeClass('sticky').removeAttr('style');
}
else{
sticky.css('top', stickyPos);
stickyPos -= sensetivity / 2;
}
lastDownPos = st;
}
else{
// console.log( 'up' );
delta = Math.abs(lastDownPos - st);
if( !sticky.hasClass('sticky') ){
stickyPos = -stickyH;
sticky.addClass('sticky').css({ position:'fixed', top: stickyPos });
}
else if( stickyPos < 0 ){
stickyPos += (delta / sensetivity);
if( stickyPos > 0 ) stickyPos = 0;
sticky.css('top', stickyPos);
}
}
lastScrollTop = st;
}
})();

关于jquery - 创建一个固定的导航,在滚动一小段距离后滑开并在向上滚动时返回,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25097372/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com