Question

在页面上滚动更多后，我想更改顶部偏移，但是jQuery不会在我的元素上进行调整。

我希望将ID为goToLog的元素在滚动80px后固定在页面上。该部分正常工作，但是当我滚动260px时，导航栏也固定在页面顶部，因此我希望将goToLog按钮显示在导航栏下方。所以我想将顶部从.2rem更改为70px。

我尝试在jQuery的顶部值后面添加！important或更改px中的css顶部，但这似乎都不起作用。

$(document).ready(function() {
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= 80) {
      $('#goToLog').css('display', 'block');
      $('#goToLog').on('click', function() {
        window.scrollTo(0, 0);
      });
    } else if (scroll >= 260) {
      $('#goToLog').css('top', '70px');
    } else {
      $('#goToLog').css('display', 'none');
    }

    if (scroll >= 260) {
      $('#mainnav').addClass('stickynav');
    } else {
      $('#mainnav').removeClass('stickynav');
    }
  });
});

#info {
  height: 5rem;
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
  position: relative;
}

#goToLog,
#logform input[type=submit] {
  width: 150px;
  height: 39px;
}

#goToLog {
  display: none;
  position: fixed;
  z-index: 5;
}

nav {
  width: 100%;
}

.stickynav {
  position: fixed !important;
  top: 0px;
  background: #9C9FB3 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="info" class="container">
  <form id="logform" class=" flex" method=POST action="">
    <div><input type="submit" name="login" value="Login"></div>
  </form><button id="goToLog" class="container" type="button">Login <span class="fas fa-arrow-circle-up"></span></button>
</div>
<header id="mainheader" class="parallax-header" data-parallax="scroll">
  <div style="height:150px"></div>
  <nav id="mainnav" class="">
    <ul class="unlist container">
      <li>nav item</li>
      <li>nav item</li>
    </ul>
  </nav>
</header>

如果显示块在jQuery中工作，我希望前70px也能工作。为什么不呢？

Answer 1

if (scroll >= 80)已经满足设置top：70px的条件，因此该条件被跳过。

除了使用else if (scroll >= 260)我想你应该巢if (scroll >= 260) {内部{1}}。看起来更像是：

if (scroll >= 80)

为什么在jQuery中调整顶部无效？

1 个答案: