javascript - 可滚动元素，如何在调整大小时更改偏移顶部？

Question

在深入研究我的可滚动元素后，我发现一旦用户调整运行以下代码的浏览器窗口的大小，可滚动元素将不会从我想要的位置开始滚动(可滚动元素滚动的那一刻)点击窗口的顶部，这就是我在运行代码之前设置变量的原因:var scrollableTopOffset = $(".scrollable").offset().top;)。此偏移量会在调整窗口大小时随时更改，因此我认为添加它会起作用(但它不起作用):

/* I need to make the idea of the following code work: */
  $( window ).resize(function() {
    /* First reset margin-top before getting offset again after resizing:  */
    $(".scrollable").stop().animate({
                marginTop: 0
     });

     /* Secondly get the current offset after reset: */
     scrollableTopOffset = $(".scrollable").offset().top;
  });
  /* End of code what needs to be answered in my question */

使用以下代码:

$(document).ready(function() {
  var topPadding = 10;
  //Set the scrollable offset before starting the scroll
  var scrollableTopOffset = $(".scrollable").offset().top;

  /* I need to make the idea of the following code work: */
  $(window).resize(function() {
    /* First reset margin-top before getting offset again after resizing:  */
    $(".scrollable").stop().animate({
      marginTop: 0
    });

    /* Second get the current offset after reset: */
    scrollableTopOffset = $(".scrollable").offset().top;
  });
  /* End of code what needs to be answered in my question */

  $(window).scroll(function() {
    /* To make sure margin-top won't be applied so that the scrollable won't exceed the footer: */
    if (($("footer").offset().top - scrollableTopOffset + topPadding) < $(window).scrollTop()) {
      //Do nothing or add 0 margin:
      $(".scrollable").stop().animate({
        marginTop: 0
      });
    }
    /* When scrolling, determine wether the browser window still contains
		scrollable: */
    else if (scrollableTopOffset < $(window).scrollTop()) {
      //Code when scrollable is within the browser window...
      //$(".scrollable").addClass("scrollable-fixed");
      $(".scrollable").stop().animate({
        marginTop: $(window).scrollTop() - scrollableTopOffset + topPadding
      });
    } else {
      //Code when scrollabe is not within the browser window...
      //$(".scrollable").removeClass("scrollable-fixed");
      $(".scrollable").stop().animate({
        marginTop: 0
      });
    }
  });
});

.container .topmenu {
  height: auto;
  background-color: transparent;
}
.some-content-block {
  height: 150px;
  margin-bottom: 5px;
  background-color: red;
}
.some-other-content {
  height: 130px;
  margin-bottom: 5px;
  background-color: yellow;
}
.scrollable {
  height: 75px;
  background-color: cyan;
}
footer {
  height: 200px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="background-color: blue;">
  <div class="row">
    <div class="col-md-12">
      <div class="some-content-block topmenu">
        <div class="col-md-6 col-sm-6">
          <div class="some-other-content">
          </div>
        </div>
        <div class="col-md-6 col-sm-6">
          <div class="some-other-content">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-10 col-sm-10 col-md-10">
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2">
      <div class="scrollable">
      </div>
    </div>
  </div>
</div>
<footer></footer>

JSFiddle

任何人都可以告诉/解释我如何使我的代码工作吗？

Answer 1

您的 $(window).resize() 监听器未按预期工作，因为您在本地重新声明变量而不是使用现有变量。删除 var 并且应该解决该特定问题。所以，你会看到

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

编辑:

看来您应该考虑以不同方式设置顶部“安全区”的高度。看起来你可以只使用 $('.topmenu').height() 而不是 $('.scrollable').offset().top。

再次编辑:

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>

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

这是一个JSFiddle .topmenu 区域的更改似乎有效。