gpt4 book ai didi

CSS 定位

转载 作者:太空宇宙 更新时间:2023-11-03 23:58:52 28 4
gpt4 key购买 nike

我已经成功地使用了 position:fixed 设置 CSS/CSS3 并且工作得很好!

我几天前看到了这个,想知道他们是如何实现向下滚动时发生的效果的,菜单栏在滚动前处于一个位置,然后转到顶部并自行锁定。

查看链接 - http://www.cssportal.com/ < 在任何页面上向下滚动并观察顶部的蓝色菜单。

我试图查看页面的源代码,但我无法确定正反面。

有人知道这个效果叫什么吗?

最佳答案

用javascript完成,添加一个包含position:fixed和其他定位样式的css类来实现你想要的。

并不复杂。这是一个 jquery 插件:http://stickyjs.com/

几年前我是这样做的:

var menu_bar = $("#menu");
var top = menu_bar.offset().top;
var detached = false;

$(window).scroll(function (e) {
if ($(this).scrollTop() >= top) {
if (!detached) {
detached = true;
menu_bar.addClass('fixed');
}
} else {
if (detached) {
detached = false;
menu_bar.removeClass('fixed');
}
}
});

关于CSS 定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17653273/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com