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

Focused element is hidden behind fixed menu

本文关键字:菜单 元素 隐藏 聚焦      更新时间:2023-09-26

我有一个底部有菜单的网站,我将其设置为固定位置。滚动时保持不变。

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

我如何解决这个问题的任何idéa,以便窗口滚动到焦点元素显示的位置。

感谢

在滚动代码中试试这个:

// 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
}
相关文章: