javascript - 修复了标题 div 在滚动时消失的菜单
问题描述
我希望结合这个模板的脚本(我正在修改) https://codepen.io/lydiawawa/pen/gEPpwX 来实现这个例子的效果: https ://codepen.io/jamesbarnett/pen/JwFuy
我需要修改的javascript如下:
/* JavaScript from: http://jqueryfordesigners.com/fixed-
floating-elements/ */
$(function () {
var sidebar = $('.sidebar');
var top = sidebar.offset().top - parseFloat(sidebar.css('margin-top'));
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
sidebar.addClass('fixed');
} else {
sidebar.removeClass('fixed');
}
});
});
谁能帮我修改脚本以达到效果?
谢谢!
解决方案
默认情况下,您已经设置了nav
as的位置,fixed
这不会给您想要的结果。您应该将其位置设置为static
默认值,并在文档到达某个点后通过滚动更改该值。
正如我之前提到的,实际 OP 中的那个脚本正在做正确的工作。我唯一做的就是将该脚本复制/粘贴到您的示例中(以及一些微小的 CSS 更改)。
在 codePen查看这个修订版
推荐阅读
- android - 模型加载到锚点后如何去除arcore中的平面?
- python - 如何使用 python 抓取 .mobi 电子书?
- javascript - 替换字符串不能按预期工作
- google-maps-api-3 - Limit Google map search to shipping ports
- python - 为什么跟随变量 'count' 给了我们 UnboundLocalError 而变量 'cache' 没有
- pdf - 如何通过谷歌脚本将谷歌驱动器中的PDF转换为文本
- typescript - 在 TypeScript 中用 `{}` 标识什么类型
- three.js - 三是 - 如何限制 OrbitControls for OrthographicCamera 中的平移,以便对象(纹理图像)始终在场景中
- javascript - 将鼠标悬停在按钮上时显示文本 JavaScript
- amazon-web-services - dynamodb.transactWriteItems 不是 Lambda 上的函数错误,但在使用 VS Code 时不是