Question

当用户向下滚动时，我正在尝试修复标题。问题是如果页面上的内容不够大，屏幕跳跃。此外，当我再次滚动到顶部时，它很难从固定变为正常。有人可以帮我这个吗？

window.addEventListener('scroll', function() {
if($(window).scrollTop() == 0) {
    $('.sticky-wrapper').removeClass('stickynow');
} else {
    $('.sticky-wrapper').addClass('stickynow');
}
});

Answer 1

我真的不明白什么是屏幕跳跃＆＃39;意思是，但我猜想当你的标题变为position:fixed时，它不再占用空间，因此content向上移动以填充该空间，从而跳过＆＃39;跳跃＆＃ 39;

您应该在内容中添加margin-top（或HTML结构中标题后面的任何元素）等于标题的高度。

见下文

＆＃13;

window.addEventListener('scroll', function() {
  let header = $('.sticky-wrapper')
  if ($(window).scrollTop() == 0) {
    $(header).removeClass('stickynow');
    $('section').css({
      'margin-top': 0
    })
  } else {
    $(header).addClass('stickynow');
    $('section').css({
      'margin-top': $(header).height()
    })
  }
});

＆＃13;

header {
  width: 100%;
  height: 100px;
  background: red;
}

.stickynow {
  position: fixed;
  background: blue;
  top: 0;
  left: 0;
}

section {
  height: 1000px;
  width: 100%;
  background: green;
}

body,
html {
  margin: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="sticky-wrapper"></header>
<section>Not 'Hopping'</section>

＆＃13;

选项B.没有javascript / jQuery

如果您不需要添加类或其他涉及javascript / jQuery的内容，您可以获得与上面相同的结果，但只能使用css

＆＃13;

header {
   position: fixed;
  background: blue;
  top: 0;
  left: 0;
  height:100px;
  width:100%;
}

section {
  height: 1000px;
  width: 100%;
  background: green;
  margin-top:100px; /*add this*/
}

body,
html {
  margin: 0;
}

＆＃13;

<header class="sticky-wrapper"></header>
<section>Not 'Hopping'</section>

＆＃13;

当屏幕不是很大时，向下滚动时固定位置

1 个答案: