我目前正在进行一个使用Locomotive Scroll进行平滑滚动的项目。我想做的就是让我的主导航标题菜单在加载时固定，然后在向下滚动时隐藏并在向上滚动时显示。首先，我尝试创建这个无机车卷轴，它运行良好。但是当我添加机车滚动时，代码根本不起作用。它只是被视为另一个正常元素。不固定也不显露。如果有人可以帮助我，将不胜感激。谢谢..！
元素样式
#my-header {
position: fixed !important;
width: 100% !important;
z-index: 99999 !important;
}
没有机车卷轴的工作代码
;( function() {
// wait until all required libraries are available
let chck_if_gsap_loaded = setInterval( function() {
if(window.gsap && window.ScrollTrigger ) {
// register scrolTrigger
gsap.registerPlugin( ScrollTrigger );
// ... do your thing
my_stuff();
// clear interval
clearInterval( chck_if_gsap_loaded );
}
}, 500 );
function my_stuff() {
const site_header = document.querySelector('#my-header');
const my_stuff = gsap.from(site_header,{
yPercent: -100,
duration: 0.25,
ease: 'sine.out'
}).progress(1);
ScrollTrigger.create({
start: 'top top-=' + 100,
onUpdate: (self)=>{
if(self.direction === -1) my_stuff.play();
else my_stuff.reverse();
}
});
}
} )();
不使用机车滚动的代码
;( function() {
let loco_scroll = {};
// wait until all required libraries are available
let chck_if_gsap_loaded = setInterval( function() {
if( window.sfe_loco_scroll && Object.keys( window.sfe_loco_scroll ).length !== 0 && window.gsap && window.ScrollTrigger ) {
// store to the local variable
loco_scroll = window.sfe_loco_scroll;
// register scrolTrigger
gsap.registerPlugin( ScrollTrigger );
// ... do your thing
my_stuff();
// clear interval
clearInterval( chck_if_gsap_loaded );
}
}, 500 );
function my_stuff() {
/* DON'T CHANGE THIS */
// each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
loco_scroll.on('scroll', ScrollTrigger.update);
// tell ScrollTrigger to use these proxy methods for the '.sfe-locomotive-scroll-wrapper' element since Locomotive Scroll is hijacking things
ScrollTrigger.scrollerProxy('.sfe-locomotive-scroll-wrapper', {
scrollTop(value) {
return arguments.length ? loco_scroll.scrollTo(value, 0, 0) : loco_scroll.scroll.instance.scroll.y;
}, // we don't have to define a scrollLeft because we're only scrolling vertically.
getBoundingClientRect() {
return {
top: 0,
left: 0,
width: window.innerWidth,
height: window.innerHeight
};
},
// LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
pinType: document.querySelector('.sfe-locomotive-scroll-wrapper').style.transform ? 'transform' : 'fixed'
});
/* DON'T CHANGE THIS END */
var site_header = document.querySelector('#my-header');
var my_stuff = gsap.from(site_header,{
yPercent: -100,
duration: 0.25,
ease: 'sine.out'
}).progress(1);
ScrollTrigger.create({
start: 'top top-=' + 100,
onUpdate: (self)=>{
if(self.direction === -1) my_stuff.play();
else my_stuff.reverse();
}
});
/* DON'T CHANGE THIS */
// each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll.
ScrollTrigger.addEventListener( 'refresh', () => loco_scroll.update());
// after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
ScrollTrigger.refresh();
/* DON'T CHANGE THIS END */
}
} )();
实际上，我不知道在这段代码中应该在哪里插入 Scroller Proxy 和 Trigger。此外，此元素没有任何 data-scroll* 属性。（而且我认为这里不需要）。