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 */

使用以下代码：

＆＃13;

$(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
      });
    }
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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区域的更改似乎有效。

Answer 2

全局定义scrollableTopOffset

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

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

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

2 个答案: