使用带有固定位置标题的scrollIntoView [英] Using scrollIntoView with a fixed position header

问题描述

我的网站标题设置为 position：fixed 。在我的一个页面上，我在元素上使用 scrollIntoView（true）。我的问题是，当调用 scrollIntoView 时，该元素位于标题下方。我如何解决这个问题，以便元素显示在标题下方？

I have a site with a header set to position: fixed. On one of my pages, I use scrollIntoView(true) on an element. My problem is that when scrollIntoView is called, the element gets positioned underneath the header. How would I fix this so that the element is shown just below the header?

我正在使用Bootstrap框架，标题的样式为 navbar navbar-fixed-top 。

I'm using the Bootstrap framework and the header is styled with navbar navbar-fixed-top.

推荐答案

这有点hacky但这是一个解决方法。

It's a bit hacky but here's a workaround.

var node = 'select your element';
var yourHeight = 'height of your fixed header';

// scroll to your element
node.scrollIntoView(true);

// now account for fixed header
var scrolledY = window.scrollY;

if(scrolledY){
  window.scroll(0, scrolledY - yourHeight);
}

这篇关于使用带有固定位置标题的scrollIntoView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！