js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法

下面详细讲解“js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法”的完整攻略。

控制元素显示在屏幕固定位置

要控制元素显示在屏幕固定位置，我们可以使用CSS的position属性。position属性有很多值，我们这里主要讲两个值：fixed和sticky。

fixed

fixed意味着元素的位置不会随着页面滚动而改变，而是相对于浏览器窗口进行定位。我们可以通过CSS设置元素的top、right、bottom和left属性来控制它在屏幕上的位置。

示例代码：

#myElement {
  position: fixed;
  top: 0;
  left: 0;
}

上面的代码将把一个ID为myElement的元素固定在屏幕左上角。

sticky

sticky的表现形式类似于fixed，但它只在其父元素内固定位置，而且当滚动到其父元素边缘时，元素会像普通流一样继续滚动。

示例代码：

#myElement {
  position: sticky;
  top: 0;
}

上面的代码将把一个ID为myElement的元素固定在其父元素的顶部位置。

监听屏幕高度变化

要监听屏幕高度变化，我们可以使用window对象上的resize事件。当窗口大小发生变化时，resize事件将被触发，我们可以在事件处理程序中执行相应的操作。

示例代码：

window.addEventListener('resize', function(event) {
  var windowHeight = window.innerHeight;
  console.log('窗口高度为：' + windowHeight);
});

上面的代码将在窗口大小发生变化时，把窗口的高度输出到控制台中。我们可以在事件处理程序中执行各种其他操作，例如重新定位固定位置的元素。

另外，一般情况下我们还需要在页面首次加载时获取窗口尺寸，可以使用以下代码：

var windowHeight = window.innerHeight;
var windowWidth = window.innerWidth;
console.log('窗口高度为：' + windowHeight);
console.log('窗口宽度为：' + windowWidth);

上面的代码将在页面首次加载时，把窗口的高度和宽度输出到控制台中。

这些就是控制元素显示在屏幕固定位置及监听屏幕高度变化的基本方法和示例，希望对你有所帮助。