我之前已经设法使用 CSS/CSS3 的 position:fixed 设置并且工作得很好!
几天前我看到了这个,想知道他们是如何实现向下滚动时发生的效果,菜单栏在滚动之前处于一个位置,然后转到顶部并锁定自身。
请参阅链接 - http://www.cssportal.com/ <在任何页面上向下滚动并观察顶部的蓝色菜单。
我试图查看页面的来源,但我无法做出正面或反面。
有谁知道这个效果叫什么?
我之前已经设法使用 CSS/CSS3 的 position:fixed 设置并且工作得很好!
几天前我看到了这个,想知道他们是如何实现向下滚动时发生的效果,菜单栏在滚动之前处于一个位置,然后转到顶部并锁定自身。
请参阅链接 - 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');
}
}
});