焦点元素隐藏在固定菜单后面

Question

我有一个网站，底部有一个菜单，我将其设置为固定位置。滚动时它仍然存在。

当使用键盘选项卡导航站点时，如果焦点元素尚未在视口中，则会自动滚动到该站点。这里的问题是，当一个焦点元素被滚动到它时，它不会显示，因为它位于底部的固定菜单后面。

关于如何解决这个问题的任何想法，以便窗口滚动到焦点元素显示的位置。

谢谢

Answer 1

试试这个滚动代码：

// lets say element is the DOM element you want to scroll into view
function scrollNow(element) {
   // create a dummy element X pixels above 'element' 
   // where X is the height of your bottom menu
   // if X is not known in advance, calculate it using $('#menu').outerHeight()
   var dummy = $('<div></div>').css({
      position: 'absolute', top: $(element).offset().top - X 
   }).appendTo('body');
   dummy[0].scrollIntoView();
   dummy.remove(); // remove the dummy element
}