Javascript 可滚动元素，如何在调整大小时更改偏移量？

在深入研究我的scrollable元素之后，我发现，一旦用户调整了运行以下代码的浏览器窗口的大小，scrollable就不会从我想要的位置开始滚动（可滚动元素到达窗口顶部的那一刻，这就是为什么我在运行代码之前设置变量：

var scrollableTopOffset=$（“.scrollable”）.offset（）.top；

）。只要调整窗口的大小，这个偏移量就会改变，所以我认为添加这个变量会起作用（但它没有）：

使用以下代码：

$（文档）.ready（函数（）{
var=10；
//在开始滚动之前设置可滚动的偏移量
var scrollableTopOffset=$（“.scrollable”）.offset（）.top；
/*我需要让以下代码的想法发挥作用：*/
$（窗口）。调整大小（函数（）{
/*调整大小后再次获得偏移量之前，首先重置边距顶部：*/
$（“.scrollable”）.stop（）.animate({
玛金托普：0
});
/*第二，复位后得到当前偏移量：*/
scrollableTopOffset=$（“.scrollable”）.offset（）.top；
});
/*代码结束我的问题需要回答什么*/
$（窗口）。滚动（函数（）{
/*要确保不会应用页边距顶部，以便可滚动页不会超过页脚，请执行以下操作：*/
if（（$（“footer”）.offset（）.top-scrollableTopOffset+TopAdding）<$（window.scrollTop（））{
//不执行任何操作或添加0边距：
$（“.scrollable”）.stop（）.animate({
玛金托普：0
});
}
/*滚动时，确定浏览器窗口是否仍包含
可滚动：*/
else if（scrollableTopOffset<$（窗口）.scrollTop（））{
//可滚动的代码在浏览器窗口中。。。
//$（“.scrollable”）.addClass（“可滚动固定”）；
$（“.scrollable”）.stop（）.animate({
marginTop:$（窗口）.scrollTop（）-scrollableTopOffset+TopAdding
});
}否则{
//scrollabe不在浏览器窗口内时的代码。。。
//$（“.scrollable”）.removeClass（“可滚动固定”）；
$（“.scrollable”）.stop（）.animate({
玛金托普：0
});
}
});
})；

.container.topmenu{
高度：自动；
背景色：透明；
}
.一些内容块{
高度：150像素；
边缘底部：5px；
背景色：红色；
}
.其他一些内容{
高度：130像素；
边缘底部：5px；
背景颜色：黄色；
}
.可滚动{
高度：75px；
背景色：青色；
}
页脚{
高度：200px；
背景颜色：绿色；
}

您的

$（窗口）。resize（）

侦听器无法按预期工作，因为您在本地重新声明了变量，而不是使用现有变量。删除

变量

，该特定问题应该会得到解决。因此，您将看到

$( window ).resize(function() {
    scrollableTopOffset = $(".scrollable").offset().top;
});

编辑：

看起来你应该考虑让“安全区”的高度不同。看起来你可以使用<代码> $（'.TopMeNel]）。Head（）/代码>而不是<代码> $（'.ScRelable）.OffStE（）。 再次编辑：

你的

topmenu

和相关div真的需要如此复杂的结构吗？像下面这样简单的东西难道不管用吗？这样，第一次编辑建议的修复看起来可以正常工作

<div class="row some-content-block topmenu">
  <div class="col-sm-6">
    <div class="some-other-content">
    </div>
  </div>
  <div class="col-sm-6">
    <div class="some-other-content">
    </div>
  </div>
</div>

虽然与您最初的问题没有直接关系，但您应该复习一下，以避免将来在视觉方面出现问题

---

下面是一个对

.topmenu

区域进行更改的示例，该区域似乎可以正常工作。

全局定义

可滚动TopOffset

scrollableTopOffset = $(".scrollable").offset().top;

$(window).resize(function() {
    scrollableTopOffset = $(".scrollable").offset().top;
});

---

可滚动元素的属性仅在文档完全加载后加载，这将不起作用，我仍然尝试了它，但不起作用。像这样全局定义变量。我刚刚删除了“var”scrollableTopOffset=$（“.scrollable”）.offset（）.top；然后在每次调整大小时更新其值，如下所示。$（窗口）。调整大小（函数（）{scrollableTopOffset=$（“.scrollable”）.offset（）.top；}）；。如果使用“var”，变量将是该函数的本地变量，并且.resize（）函数中的“scrollableTopOffset”的更新值在.scroll（）中不可用函数。是的，我明白你想说的，你的答案看起来与Thernys的答案非常相似。全局定义变量的意思是在

$（document.ready（）之后或之前

？我删除了问题中的var，因此这不再是重点。我想我也明白了现在发生的事情：一旦向下滚动并调整大小，可滚动元素的偏移量将从那时开始计算。向可滚动元素添加

margin top:0；

可以解决这个问题，但它似乎仍然关闭了…（有问题的更新代码）这将是一个很好的注释，但不幸的是它不能使我的代码正常工作。编辑：看起来它确实工作，但有时工作得不太好，这看起来有点奇怪，因为调整大小和偏移量并不总是能使代码正常工作，但在另一个调整大小事件之后，它有时确实能正常工作。@Barrosy，用不同的方法编辑我的答案在工作中？在我目前的小提琴中看起来不是这样，但你的答案似乎接近我想要的。@Barrosy你以前的版本似乎更接近你想要的，现在你只是把事情复杂化了。试着只替换

$（'.scrolltop'）.offset（）.top

在您的初始小提琴中，没有所有这些原始偏移，使用

$（“.topmenu”）.height（）

当div改变宽度（例如，引导列从中到小列）偏移不再正确时，可滚动项将停留在更高的位置

scrollableTopOffset = $(".scrollable").offset().top;

$(window).resize(function() {
    scrollableTopOffset = $(".scrollable").offset().top;
});