我想要一个 JS 库,它可以让我构建一个有吸引力的菜单,该菜单始终在屏幕左侧对用户可见,大约。到中间。
最佳答案
既然你要求一个库,这里是jQuery。
它使用 CSS position:fixed
(如果可用),并在需要时优雅地降级到 JavaScript 方式。
[See it in action ]
CSS
#menu {
position: absolute;
left: 0;
top: 50%;
/* ... */
}
Javascript
(function() {
var $menu = $("#menu");
var $window = $(window);
var menuHalfHeight = $menu.outerHeight() / 2;
var updateMenu = function() {
$menu.css({
"margin-top": - menuHalfHeight + $window.scrollTop()
});
};
var supportFixed = (function() {
$menu.css({ position: "fixed" });
updateMenu();
return $menu.offset().top > 0; // ~150
})();
if (!supportFixed) {
$menu.css({ position: "absolute" });
$window.scroll(updateMenu);
}
})();
关于Javascript 库自动滚动固定在页面左侧的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3245423/