HTML页面滚动时部分内容位置固定不滚动的实现

在一些需要实现滚动的web页面设计中，我们经常会遇到一些需要将某些内容位置固定，不随着整体页面的滚动而滚动的情况。这样的需求用CSS来实现是比较简单的，下面我们就来详细了解一下HTML页面滚动时部分内容位置固定不滚动的实现。

使用position固定元素位置

要实现固定某个元素位置，我们可以使用CSS中的position属性。position有relative、absolute、fixed等取值。relative表示相对定位，absolute表示绝对定位，而fixed表示固定位置定位。

我们来看下固定某个元素的实现过程。首先，我们需要在CSS中为元素设置固定的位置。比如我们要固定头部导航栏，代码如下：

.fixed-nav{

   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 1000;
   background-color: #fff;
   box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
}

在上述代码中，我们将导航栏设置为固定位置，其实就是应用CSS中的fixed属性。其中，top、left、width属性用于指定元素的位置，z-index属性用于定义元素在整个页面中的层级（也就是说，如果元素设置的z-index是100，那么它就会在其他元素上显示）。

使用js监听滚动事件

除了使用CSS中的position属性来实现元素固定位置，我们还可以使用JavaScript来监听滚动事件并实现固定位置的效果。

我们可以使用addEventListener来监听Window对象的滚动事件，代码如下：

window.addEventListener('scroll', function() {
   //dosomething
});

在监听滚动事件时，我们需要实时获得文档滚动的高度，一般通过document.body.scrollTop、document.documentElement.scrollTop、window.scrollY等属性可以获得当前滚动的高度。如果当前滚动的高度超过了指定元素的高度，那么就可以将该元素的position属性设为fixed，使其固定在页面上。

下面是一个简单的示例代码：

window.addEventListener('scroll', function() {
   var nav = document.querySelector('.fixed-nav');
   var scrollTop = document.body.scrollTop || document.documentElement.scrollTop || window.scrollY;
   var navTop = nav.offsetTop;
   if(scrollTop > navTop) {
      nav.style.position = 'fixed';
      nav.style.top = 0;
   } else {
       nav.style.position = 'relative';
       nav.style.top = '';
   }
});

在上述代码中，我们首先获取固定位置的元素nav，并使用它的offsetTop方法获得nav元素相对于父元素的偏移量。然后，如果scrollTop>navTop，我们就将nav的position属性设为fixed，top属性为0，使其固定在页面上。如果scrollTop<=navTop，我们就将nav的position属性设为relative，意味着将nav元素还原到相对位置，并将top属性设为空，让它回到原来的位置。

总结

通过本文我们了解到了使用CSS和JavaScript实现HTML页面滚动时部分内容位置固定的方法。通过CSS的position属性和JavaScript的监听滚动事件的方法，实现某些元素位置的固定，可以有效增强页面的功能和美观程度。