可滚动元素，如何在调整大小时更改偏移顶部?
[英] Scrollable element, how to change offset top on resize?
本文介绍了可滚动元素，如何在调整大小时更改偏移顶部?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在深入研究我的可滚动元素后，我发现一旦用户调整运行以下代码的浏览器窗口的大小，可滚动元素将不会从我想要的点开始滚动(可滚动元素出现的那一刻)击中窗口的顶部，这就是为什么我在运行代码之前设置变量的原因:var scrollableTopOffset = $(".scrollable").offset().top;).这个偏移量会在窗口大小调整时改变，所以我认为添加它会起作用(但它不会):
/* 我需要让以下代码的想法起作用:*/$( 窗口 ).resize(function() {/* 在调整大小后再次获得偏移之前首先重置 margin-top: */$(".scrollable").stop().animate({边距顶部:0});/* 其次获取复位后的当前偏移量:*/scrollableTopOffset = $(".scrollable").offset().top;});/* 在我的问题中需要回答的代码结束 */
使用以下代码:
$(document).ready(function() {var topPadding = 10;//在开始滚动之前设置可滚动偏移var scrollableTopOffset = $(".scrollable").offset().top;/* 我需要让以下代码的想法起作用:*/$(window).resize(function() {/* 在调整大小后再次获得偏移之前首先重置 margin-top: */$(".scrollable").stop().animate({边距顶部:0});/* 第二次获取重置后的当前偏移量:*/scrollableTopOffset = $(".scrollable").offset().top;});/* 在我的问题中需要回答的代码结束 */$(窗口).滚动(功能(){/* 确保不会应用 margin-top 以便滚动不会超过页脚:*/if (($("footer").offset().top - scrollableTopOffset + topPadding) < $(window).scrollTop()) {//什么都不做或添加0边距:$(".scrollable").stop().animate({边距顶部:0});}/* 滚动时，判断浏览器窗口是否仍然包含可滚动:*/否则 if (scrollableTopOffset < $(window).scrollTop()) {//当可滚动在浏览器窗口内时的代码...//$(".scrollable").addClass("scrollable-fixed");$(".scrollable").stop().animate({marginTop: $(window).scrollTop() - scrollableTopOffset + topPadding});} 别的 {//滚动条不在浏览器窗口内时的代码...//$(".scrollable").removeClass("scrollable-fixed");$(".scrollable").stop().animate({边距顶部:0});}});});
.container .topmenu {高度:自动；背景色:透明；}.some-content-block {高度:150px；底边距:5px；背景颜色:红色；}.some-other-content {高度:130px；底边距:5px；背景颜色:黄色；}.scrollable {高度:75px；背景颜色:青色；}页脚{高度:200px；背景颜色:绿色；}
<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 class="col-md-6 col-sm-6"><div class="some-other-content">
<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 class="col-md-4"><div class="some-content-block">
<div class="col-md-4"><div class="some-content-block">
<div class="col-md-4"><div class="some-content-block">
<div class="col-md-4"><div class="some-content-block">
<div class="col-md-4"><div class="some-content-block">
<div class="col-md-4"><div class="some-content-block">
<div class="col-xs-2 col-sm-2 col-md-2"><div class="scrollable">
<footer></footer>
JSFiddle
谁能告诉/解释我如何让我的代码工作?
解决方案
您的 $(window).resize() 侦听器无法按预期工作，因为您在本地重新声明变量而不是使用您的现有变量.删除 var 并且应该解决该特定问题.所以，你会看到
$( window ).resize(function() {scrollableTopOffset = $(".scrollable").offset().top;});
看起来您应该考虑以不同的方式将安全区"的高度设置在顶部.看起来你可以使用 $('.topmenu').height() 而不是 $('.scrollable').offset().top.>
再次
你的topmenu和相关的div真的有必要有这么复杂的结构吗?像下面这样更简单的东西不会工作吗?有了这个，第一个编辑建议的修复看起来可以正常工作.
<div class="col-sm-6"><div class="some-other-content">
虽然与您最初的问题没有直接关系，但您应该复习 Bootstrap 网格系统避免将来出现视觉问题.
这是一个 JSFiddle，其中包含对 .topmenu 区域的更改这似乎有效.
After diving deeper into my scrollable element, I found out that once a user resizes a browser window running the following code, the scrollable won't start scrolling from the point I want it to do (the very moment when the scrollable element hits the top side of the window, which is why I set the variable before running my code: var scrollableTopOffset = $(".scrollable").offset().top;). This offset would change anytime the window is resized, so I thought adding this would work (but it does not):
/* 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 */
Using the following code:
$(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
Can anyone tell/expain me how I can make my code work?
解决方案
Your $(window).resize() listener does not work as desired, because you redeclare the variable locally instead of using your existing variable. Remove the var and that particular problem should be solved. So, you would be looking at
$( window ).resize(function() {
scrollableTopOffset = $(".scrollable").offset().top;
});
Edit:
Looks like you should consider getting the height of the 'safety zone' up top differently. It looks like you could just use $('.topmenu').height() instead of $('.scrollable').offset().top.
Edit again:
Is it really necessary to have such a complicated structure for your topmenu and related divs? Wouldn't something much simpler like the below work? With that, the first edit's suggested fix looks to work properly.
<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>
Though not directly related to your initial question, you should brush up on the Bootstrap grid system to avoid future problems with visuals.
Here is a JSFiddle with the changes to the .topmenu area that seems to work.
这篇关于可滚动元素，如何在调整大小时更改偏移顶部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
