Question

我正在尝试在div的左侧创建一个粘性菜单，该菜单链接到内容的锚标记并滑动到内容的顶部。但是，我希望这个粘性菜单保持附加到div。我试图将其位置设置为绝对值，但是当我展开窗口时，它的位置会水平变化。下面是我用于幻灯片动画的jquery函数。

$(function() {
 $('.slider a').bind('click', function(event) {
 var $anchor = $(this);

 $('html, body').stop().animate({
   scrollTop: $($anchor.attr('href')).offset().top
 }, 1000);

event.preventDefault();
 });
});

这是我的小提琴 https://jsfiddle.net/mosmic/319d4bcL/1/

Answer 1

这是一个更新的JSFiddle，修复了您的问题：

https://jsfiddle.net/319d4bcL/2/

我在菜单中添加了以下CSS：

#sticky-menu {
  width: 20px;
  position: fixed;
  margin-left:-30px;
}

position-fixed和left或right绝对值的问题是div停止与父级相关并从视口中获取值。这可以通过使用边距来解决。祝你好运。

Answer 2

您的意思是position: fixed吗？

https://jsfiddle.net/g3x70z7w/

我所做的只是改变：

#sticky-menu {
  position: relative;
}

要...

#sticky-menu {
  position: fixed;
}

滑动的div侧面的粘滞菜单

2 个答案: