如何使用CSS和Javascript滚动/关注菜单？

Posted 2021-05-04

我正在测试此页面上的滚动/关注菜单http://www.pablitogreco.com/xtango/#x。菜单存在于模态窗口内。在研究了stackoverflow中的大量示例后，这是一个更接近的例子：

http://jsfiddle.net/c0pnrvc6/

但是向上滚动有几个缺点，我想我错过了很多。你能帮我吗？

html

<div class=scroller>Xtango</div>

CSS

.scroller {
position: relative;
top: 0px;
width: 100%;
background-color: rgba(255, 255, 255, 0.68);
z-index: 1}

使用javascript

$(window).scroll(function() {
if ($(window).scrollTop() > 0) {
$('.scroller').css('top', $(window).scrollTop()); } });

答案

尝试使用-1而不是0。

$(window).scroll(function() {
  if ($(window).scrollTop() > -1) {
    $('.scroller').css('top', $(window).scrollTop());
  }
});