Javascript 一个粘性菜单栏，从底部开始，然后停留在顶部

我正在制作一个单页网站，在第一次打开时，整个屏幕都是一个大图像，菜单栏在屏幕底部

当你向下滚动时，我希望菜单与内容一起滚动，但要始终粘在窗口顶部，永远不要滑出顶部边缘，以便始终可以访问

我发现了很多“粘性菜单”脚本，它们可以做一些与它相近的脚本，但是它们总是从页面中间某个菜单栏开始，而不是一个在开始时与底部对齐的菜单。p> 这是一把小提琴：

我在其中使用了以下脚本：

像我尝试过的所有其他方法一样，它没有达到预期效果。当您滚动时，菜单栏无法平滑滑动，只要您开始滚动，它就会跳到页面顶部

我认为问题在于我正在使用

position: absolute;
bottom: 0;

在菜单栏的div上

然而，我不知道如何在第一次打开页面时将其粘贴到窗口底部，而不管窗口大小

有什么想法吗？

---

编辑

除此之外，你还可以从以下方面激励自己：

对于这种结果

位置：固定而非绝对，此处脚本已更新：

//$(document).ready(function(){
//    $("#menu").sticky({topSpacing:0});
//  });

var menu =  document.querySelector('#menu');
var box =  document.querySelector('#screen2');
var boxPosition = box.getBoundingClientRect().top;
window.addEventListener('scroll', function() {
    if (window.pageYOffset >= boxPosition) {
        menu.style.top = '0px';
    } else {
        menu.style.top = 'calc(100% - 100px)';
    }
});

var menu=document.querySelector（“#menu”）；
var-box=document.querySelector（“#screen2”）；
var boxPosition=box.getBoundingClientRect（）.top；
addEventListener（'scroll'，function（）{
如果（window.pageYOffset>=boxPosition）{
menu.style.top='0px'；
}否则{
menu.style.top='calc（100%-100px）'；
}
});
html，
身体{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
位置：相对位置；
}
#屏幕1{
最小高度：100%；
宽度：100%；
保证金：0；
填充：0；
背景色：#000；
}
#菜单{
过渡：1s；
高度：100px；
宽度：100%；
位置：固定；
底部：0；
左：0；
顶部：计算（100%-100px）；
背景色：#009900；
边框顶部：2个实心#333；
颜色：#fff；
文本对齐：居中；
字体大小：20px；
}
#屏幕2{
宽度：100%；
背景色：#f4452a；
高度：1000px；
填充顶部：200px；
文本对齐：居中；
}

屏幕
这是菜单

我不想突然跳到顶端，而是想在滚动条上轻轻滑动到顶端，然后坚持到底
页面的其余部分

















您可以添加一个
转换
和一个
top
值来触发
转换
您正在寻找类似此站点的内容吗？嗯。这看起来更好，但不是我想要的，因为它会在你开始滚动时移到顶部。我希望它保持在同一个位置-介于“screen1”和“screen2”之间，而不是移到“screen1”上方。好。。。如果我找不到这样做的方法，我可能会使用你的想法，谢谢：）@TinaMalina好吧，这是关于你的脚本，CSS与触发滚动顶部无关：（，也许你想在你的问题中添加此信息，因为我可能需要另一个脚本（这不是我自己写的，我只是在谷歌上搜索）.但我不知道有什么效果，我试过一些…：/@TinaMalina你可以从中得到启发
//$(document).ready(function(){
//    $("#menu").sticky({topSpacing:0});
//  });

var menu =  document.querySelector('#menu');
var box =  document.querySelector('#screen2');
var boxPosition = box.getBoundingClientRect().top;
window.addEventListener('scroll', function() {
    if (window.pageYOffset >= boxPosition) {
        menu.style.top = '0px';
    } else {
        menu.style.top = 'calc(100% - 100px)';
    }
});