html 中很多li我们用sticky达到黏住顶部的效果同时点击这个黏住的li可以回到li原本的位置

可以使用CSS的position: sticky属性来实现黏住顶部的效果，同时使用JavaScript的scroll事件和offsetTop属性来实现点击回到原位置的效果。

首先，在需要黏住的li元素上添加如下CSS样式：

li.sticky {
  position: sticky;
  top: 0;
}

这样，当用户滚动到该li元素位置时，它就会黏住在顶部。

接下来，使用JavaScript监听页面的scroll事件，当用户滚动到黏住的li元素位置时，为它添加一个class名。

window.addEventListener('scroll', function() {
  var li = document.querySelector('.sticky');
  if (window.pageYOffset >= li.offsetTop) {
    li.classList.add('sticky-top');
  } else {
    li.classList.remove('sticky-top');
  }
});

这里使用了classList属性，当用户滚动到li元素位置时，为它添加一个名为sticky-top的class，这个class可以用来实现更多的样式效果。

最后，为黏住的li元素添加点击事件，当用户点击它时，页面会滚动到该li元素原本的位置。

var stickyLi = document.querySelector('.sticky');
stickyLi.addEventListener('click', function() {
  window.scrollTo({
    top: stickyLi.offsetTop,
    behavior: 'smooth'
  });
});

这里使用了JavaScript的scrollTo方法，它可以平滑地滚动页面到指定位置。在这里，我们将页面滚动到黏住的li元素的offsetTop位置，也就是它原本的位置。

完整代码如下：

HTML：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li class="sticky">Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ul>

CSS：

li.sticky {
  position: sticky;
  top: 0;
}

li.sticky-top {
  background-color: #ccc;
}

JavaScript：

window.addEventListener('scroll', function() {
  var li = document.querySelector('.sticky');
  if (window.pageYOffset >= li.offsetTop) {
    li.classList.add('sticky-top');
  } else {
    li.classList.remove('sticky-top');
  }
});

var stickyLi = document.querySelector('.sticky');
stickyLi.addEventListener('click', function() {
  window.scrollTo({
    top: stickyLi.offsetTop,
    behavior: 'smooth'
  });
});