Jquery 如何使用页面滚动使内容在固定div中平滑滚动

我试图创建一个固定顶部导航，当你向下滚动页面时，它的菜单会发生变化。当您滚动经过某个y点时，菜单将在您向下滚动页面时滚动，以显示第二个菜单，该菜单将变为粘性菜单。我在这里实现了一个粗略的版本：

我有两个主要问题

1） 内容滚动不顺畅。如果快速滚动，您会注意到内容移动不平稳

2） 我不确定这是实现此类动画/效果的最佳方式。代码很粗糙，但我想知道是否有更好/更优化的方法来实现这一点

谢谢

以下是粗略原型的代码（与JSFIDLE链接相同）

身体{
高度：2000px；
}
.集装箱{
位置：固定；
顶部：0px；
左：0px；
宽度：100%；
背景色：#CCC；
高度：80px；
溢出：隐藏；
}
.content1、.content2{
高度：40px；
利润率：40像素；
}
大量文本
更多文本
$（窗口）。滚动（函数（）{
var scrollYpos=$（document.scrollTop（）；
如果（scrollYpos>200&&scrollYpos<300）{
变量y=200个涡卷；
$（“.content”）.css（{'position'：'relative'，'top'：y}）；
}
});

由于您无法控制用户的CPU、浏览器、浏览器版本，甚至图形卡等，因此您无能为力。您可以尝试使用普通JavaScript而不是jQuery来稍微提高性能，但这可能不会有多大帮助（它可能不会改变任何东西，这取决于渲染或脚本解释器的速度是否慢）。
例如，在我的浏览器中，您的示例运行得非常顺利。
这真的取决于你的客户如何看，这只是网络。不要太担心它

最后，我注意到两件事：

您不必在每次接收到滚动事件时设置“position:relative”，只需在样式表中设置一次即可

如果滚动太快，菜单就会卡在一个奇怪的位置

以下是修复上述问题的代码，尽管它可能无法修复smoothnes问题：

$(window).scroll(function() {
    var scrollYpos = $(document).scrollTop();

    var y;
    if (scrollYpos > 200 && scrollYpos < 300) {
        y = 200 - scrollYpos;
    } else if (scrollYpos > 300) {
        y = -100;
    } else {
        y = 0;
    }

    console.log(y);
    $(".content").css({'top': y});
});

$（窗口）。滚动（函数（）{
var scrollYpos=$（document.scrollTop（）；
变量y；
如果（scrollYpos>200&&scrollYpos<300）{
y=200——滚动体；
}否则如果（scrollYpos>300）{
y=-100；
}否则{
y=0；
}
控制台日志（y）；
$（“.content”）.css（{'top'：y}）；
});

如果您只是想稍微消除滚动间隔之间的间隙，请尝试以下操作：

$(window).scroll(function() {
    var scrollYpos = $(document).scrollTop();

    var y;
    if (scrollYpos > 200 && scrollYpos < 300) {
        y = 200 - scrollYpos;
    } else if (scrollYpos > 300) {
        y = -100;
    } else {
        y = 0;
    }

    var position = parseInt($(".content").css('top'));
    if((scrollYpos < 300 && scrollYpos > 200)
    || (position   < 0   && position   > -100)) {
        $(".content").stop().animate({'top': y}, 50);
    }
});

$（窗口）。滚动（函数（）{
var scrollYpos=$（document.scrollTop（）；
变量y；
如果（scrollYpos>200&&scrollYpos<300）{
y=200——滚动体；
}否则如果（scrollYpos>300）{
y=-100；
}否则{
y=0；
}
var position=parseInt（$（“.content”）.css（'top'）；
如果（（scrollYpos<300&&scrollYpos>200）
||（位置<0和位置>-100））{
$（“.content”）.stop（）.animate（{'top'：y}，50）；
}
});

由于您无法控制用户的CPU、浏览器、浏览器版本，甚至图形卡等，因此您无能为力。您可以尝试使用普通JavaScript而不是jQuery来稍微提高性能，但这可能不会有多大帮助（它可能不会改变任何东西，这取决于渲染或脚本解释器的速度是否慢）。
例如，在我的浏览器中，您的示例运行得非常顺利。
这真的取决于你的客户如何看，这只是网络。不要太担心它

最后，我注意到两件事：

您不必在每次接收到滚动事件时设置“position:relative”，只需在样式表中设置一次即可

如果滚动太快，菜单就会卡在一个奇怪的位置

以下是修复上述问题的代码，尽管它可能无法修复smoothnes问题：

$(window).scroll(function() {
    var scrollYpos = $(document).scrollTop();

    var y;
    if (scrollYpos > 200 && scrollYpos < 300) {
        y = 200 - scrollYpos;
    } else if (scrollYpos > 300) {
        y = -100;
    } else {
        y = 0;
    }

    console.log(y);
    $(".content").css({'top': y});
});

$（窗口）。滚动（函数（）{
var scrollYpos=$（document.scrollTop（）；
变量y；
如果（scrollYpos>200&&scrollYpos<300）{
y=200——滚动体；
}否则如果（scrollYpos>300）{
y=-100；
}否则{
y=0；
}
控制台日志（y）；
$（“.content”）.css（{'top'：y}）；
});

如果您只是想稍微消除滚动间隔之间的间隙，请尝试以下操作：

$(window).scroll(function() {
    var scrollYpos = $(document).scrollTop();

    var y;
    if (scrollYpos > 200 && scrollYpos < 300) {
        y = 200 - scrollYpos;
    } else if (scrollYpos > 300) {
        y = -100;
    } else {
        y = 0;
    }

    var position = parseInt($(".content").css('top'));
    if((scrollYpos < 300 && scrollYpos > 200)
    || (position   < 0   && position   > -100)) {
        $(".content").stop().animate({'top': y}, 50);
    }
});

$（窗口）。滚动（函数（）{
var scrollYpos=$（document.scrollTop（）；
变量y；
如果（scrollYpos>200&&scrollYpos<300）{
y=200——滚动体；
}否则如果（scrollYpos>300）{
y=-100；
}否则{
y=0；
}
var position=parseInt（$（“.content”）.css（'top'）；
如果（（scrollYpos<300&&scrollYpos>200）
||（位置<0和位置>-100））{
$（“.content”）.stop（）.animate（{'top'：y}，50）；
}
});

感谢您对javascript的编辑。我最终改变了它的工作方式，使它滚动得更平滑。我没有根据滚动的像素数移动内容，而是在特定的滚动点制作动画。谢谢你的帮助。谢谢你对javascript的编辑。我最终改变了它的工作方式，使它滚动得更平滑。我没有根据滚动的像素数移动内容，而是在特定的滚动点制作动画。我感谢你的帮助。