JS实现侧悬浮浮动实例代码

JS实现侧悬浮浮动是一种常见的网页侧边栏布局方式，下面是实现这种效果的完整攻略：

JS实现侧悬浮浮动是一种常见的网页侧边栏布局方式，下面是实现这种效果的完整攻略：

1. HTML结构

首先，我们需要在HTML中定义容器，侧边栏内容和主体内容。例如，我们可以定义一个名为container的div作为整个容器，定义两个名为sidebar和mainContent的div存放侧边栏和主体内容。

<div class="container">
  <div class="sidebar">侧边栏内容</div>
  <div class="mainContent">主体内容</div>
</div>

1. CSS样式

接下来，我们需要设置container的宽度，以及为sidebar和mainContent定义相应的样式。同时，我们需要为sidebar和mainContent添加position:relative属性。

.container {
  width: 100%;
}

.sidebar {
  width: 200px;
  position: relative;
  float: left;
}

.mainContent {
  margin-left: 200px;
  position: relative;
}

在CSS样式中，我们定义了sidebar的宽度为200px，同时将其设置为浮动元素，以便能够实现侧边栏悬浮的效果。mainContent的左边距设置为200px，以便让主体内容在侧边栏的右侧。

1. JS实现

我们使用JS脚本来实现悬浮浮动的效果。 首先获取sidebar元素的起始位置startPos，同时获取mainContent元素的到顶部的距离mainStartPos。写匿名函数scroll来处理滚动事件。

var sidebar = document.querySelector('.sidebar');
var mainContent = document.querySelector('.mainContent');
var startPos = sidebar.getBoundingClientRect().top;
var mainStartPos = mainContent.getBoundingClientRect().top;

window.addEventListener('scroll', function () {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

  if (scrollTop > startPos) {
    sidebar.style.position = 'fixed';
    sidebar.style.top = '0';
  } else {
    sidebar.style.position = 'relative';
  }

  if (scrollTop > mainStartPos) {
    sidebar.style.position = 'absolute';
    sidebar.style.top = mainContent.offsetHeight - sidebar.offsetHeight + 'px';
  }
});

在JS中，我们使用getBoundingClientRect()方法获取sidebar和mainContent元素的位置信息。然后添加滚动事件，当滚动距离大于startPos时，设置sidebar的position为'fixed'，并将sidebar的top设置为'0'。当滚动距离大于mainStartPos时，我们让sidebar跟随主体内容的滚动，设置sidebar的position为'absolute'，并将sidebar的top设置为mainContent.offsetHeight减去sidebar.offsetHeight的值。

以下是两条示例说明：

示例1：为了让侧边栏在一定高度内悬浮，我们可以对JS脚本进行修改，比如在滚动高度大于500px后让侧边栏暂停悬浮，代码如下：

window.addEventListener('scroll', function () {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

  if (scrollTop > startPos && scrollTop < 500) {
    sidebar.style.position = 'fixed';
    sidebar.style.top = '0';
  } else if (scrollTop >= 500) {
    sidebar.style.position = 'relative';
  }

  if (scrollTop > mainStartPos) {
    sidebar.style.position = 'absolute';
    sidebar.style.top = mainContent.offsetHeight - sidebar.offsetHeight + 'px';
  }
});

示例2：我们也可以修改JS脚本使得侧边栏在滚动到一定高度后显示一个返回顶部按钮，代码如下：

var backToTop = document.createElement('div');
backToTop.className = 'back-to-top';
backToTop.innerHTML = 'Top';
document.body.appendChild(backToTop);

window.addEventListener('scroll', function () {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

  if (scrollTop > startPos && scrollTop < 500) {
    sidebar.style.position = 'fixed';
    sidebar.style.top = '0';
  } else if (scrollTop >= 500) {
    sidebar.style.position = 'relative';
    backToTop.style.display = 'block';
  } else {
    sidebar.style.position = 'relative';
    backToTop.style.display = 'none';
  }

  if (scrollTop > mainStartPos) {
    sidebar.style.position = 'absolute';
    sidebar.style.top = mainContent.offsetHeight - sidebar.offsetHeight + 'px';
  }
});

backToTop.addEventListener('click', function () {
  document.documentElement.scrollTop = 0;
  document.body.scrollTop = 0;
});

在这个示例中，我们首先定义了一个backToTop元素作为返回顶部按钮。然后在滚动距离大于500px时，让backToTop元素显示出来，添加一个点击事件将滚动距离设置为0，以便让用户实现返回顶部的功能。