Question

我正在创建一个粘性导航栏，它将在启动时定位在视口的底部。我使用vh单位来放置它。现在，如果视口的高度发生变化，导航栏将按预期重新定位。但是，.offset().top将继续使用过时的位置。这导致脚本在错误的位置切换为粘滞。

＆＃13;

var win = $(window),
  header = $('nav'),
  offset = (header.offset().top);

win.scroll(function() {
  if (offset < win.scrollTop()) {
    header.addClass("sticky");
  } else {
    header.removeClass("sticky");
  }
});

＆＃13;

#container {
  margin: 0;
  padding: 0;
}
#boxi {
  z-index: -15;
  height: 50vh;
  background-color: green;
}
#boxi2 {
  z-index: -15;
  height: 1000px;
  background-color: pink;
}
nav {
  width: 100%;
  position: absolute;
  height: 50px;
  top: 50vh;
  transform: translate(0, -50px);
  background-color: black;
  opacity: 0.5;
  color: white;
}
nav.sticky {
  transform: translate(0, 0px);
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 999;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body id="container">
  <div id="boxi"></div>
  <nav>Sticky!</nav>
  <div id="boxi2"></div>
</body>

＆＃13;

JSFiddle

Answer 1

在窗口调整大小后，您的偏移量未更新。因此，滚动经过原始点后，addClass / removeClass将触发。值得庆幸的是，您只需将以下内容添加到代码的末尾即可解决问题：

win.on('resize',function(){
    offset = (header.offset().top);
});

这可以确保每次窗口调整大小时都会更新偏移量，从而保持同步。

JS Fiddle

Answer 2

使用窗口.resize Jquery函数。它会在重新调整目标时触发。

var win = $(window),
    header = $('nav'),
    offset = (header.offset().top);

win.scroll(function() {
    if (offset < win.scrollTop()) {
        header.addClass("sticky");
    } else {
        header.removeClass("sticky");
    }
}),

win.resize(function () {
		offset = header.offset().top;
})

#container{
  margin: 0;
  padding: 0;
}  

#boxi {
  z-index: -15;
  height:50vh;
  background-color:green;
}

#boxi2{
  z-index: -15;
  height:1000px;
  background-color:pink;
}

nav {
  width:100%;  
  position:absolute;
  height:50px;
  top:50vh;
  transform: translate(0,-50px);
  background-color:black;
  opacity:0.5;
  color:white;
}

nav.sticky {
  transform: translate(0, 0px);
  position:fixed;
  top:0px;
  right:0px;
  left:0px;
  z-index:999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="container">
    <div id="boxi"></div>
    <nav>Sticky!</nav>
    <div id="boxi2"></div>
</body>

带调整大小的jquery粘性标题

2 个答案: