Question

我正在使用 jquery .offset（）。top 在我的网站上构建一个固定菜单，它的工作原理是绝对完美的，但是只有当用户查看页面顶部时，它才起作用。如果尝试将主体向下滚动到中间，然后尝试单击菜单的左侧链接，则滚动会出现奇怪的行为，并且不再显示正确的锚点，甚至最坏的挡块也无法完全正常工作。这是为什么？我做错了什么？

$(document).ready(function() {
  
  var $wrapper = $('.popup-cats-wrapper');

  $('.black-btn').click(function() {
    $wrapper.animate({
      scrollTop: $wrapper.scrollTop() + $(".black-anchor").offset().top - 10
    }, 400)
  });
  $('.red-btn').click(function() {
    $wrapper.animate({
      scrollTop: $wrapper.scrollTop() + $(".red-anchor").offset().top - 10
    }, 400)
  });
  $('.green-btn').click(function() {
    $wrapper.animate({
      scrollTop: $wrapper.scrollTop() + $(".green-anchor").offset().top - 10
    }, 400)
  });
  $('.blue-btn').click(function() {
    $wrapper.animate({
      scrollTop: $wrapper.scrollTop() + $(".blue-anchor").offset().top - 10
    }, 400)
  });


});

body {
  font-size: 12px;
  font-family: "sans";
  height:2000px
}

.hero-categories-wrap {
  overflow: hidden;
  height: 200px;
  position:fixed;
}

.popup-cats-wrapper {
  height: 200px;
  width: 300px;
  background: #aaa;
  display: inline-block;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 0px;
  overflow-x: auto;
}

.categories-sidebar {
  width: 120px;
  background: #ececef;
  height: 200px;
  padding-top: 20px;
  float: left;
}

.popup-menu-row {
  padding: 5px 8px;
  color: #212121;
  font-weight: 600;
  cursor: pointer;
  border-radius: 25px;
  margin-bottom: 5px;
}

.color-block {
  margin-bottom: 10px;
  margin-top: 25px;
}

.cat-title {
  font-weight: 600;
  font-size: 12px;
  color: #000;
  margin-bottom: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<html>
<body>


<div class="hero-categories-wrap">

  <div class="categories-sidebar">
    <div class="popup-menu-row black-btn">BLACK</div>
    <div class="popup-menu-row red-btn">RED</div>
    <div class="popup-menu-row green-btn">GREEN</div>
    <div class="popup-menu-row blue-btn">BLUE</div>
  </div>
  <div class="popup-cats-wrapper">

    <div class="color-block">
      <div class="cat-title black-anchor">BLACK COLOR</div>
      <div class="cat-description">Black is the darkest color, the result of the absence or complete absorption of visible light. It is an achromatic color, a color without hue, like white and gray.</div>
    </div>

    <div class="color-block">
      <div class="cat-title red-anchor">RED COLOR</div>
      <div class="cat-description">Red is the color at the end of the visible spectrum of light, next to orange and opposite violet. It has a dominant wavelength of approximately 625–740 nanometres. It is a primary color in the RGB color model and the CMYK color model, and is the
        complementary color of cyan.</div>
    </div>


    <div class="color-block">
      <div class="cat-title green-anchor">GREEN COLOR</div>
      <div class="cat-description">Green is the color between blue and yellow on the visible spectrum. It is evoked by light which has a dominant wavelength of roughly 495–570 nm. </div>
    </div>

    <div class="color-block">
      <div class="cat-title blue-anchor">BLUE COLOR</div>
      <div class="cat-description">Blue is one of the three primary colours of pigments in painting and traditional colour theory, as well as in the RGB colour model. It lies between violet and green on the spectrum of visible light. The eye perceives blue when observing light with
        a dominant wavelength between approximately 450 and 495 nanometres. Most blues contain a slight mixture of other colours; azure contains some green, while ultramarine contains some violet.</div>
    </div>

  </div>
</div>
</body>
</html>

Answer 1

您想增加一个相对的位置。将.offset()更改为.position()，这样就不会在每次移动窗口时将其与根位置进行比较。

jquery .offset（）。top没有预期的行为

1 个答案: