jQuery .offset 从底部位置不能在滚动功能中工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11294981/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .offset from the bottom position not working in a scroll function?
提问by Joshc
I'm having trouble setting 2 positions on a scroll function using offset.
我在使用偏移量的滚动功能上设置 2 个位置时遇到问题。
I have created a fiddle so you can see... http://jsfiddle.net/motocomdigital/SGCHt/12/
我创建了一个小提琴，所以你可以看到...... http://jsfiddle.net/motocomdigital/SGCHt/12/
When you open this fiddle, reduce the fiddle preview viewport down to the similar size of the screenshot below.
当您打开此小提琴时，将小提琴预览视口缩小到与下面屏幕截图类似的大小。
MY PROBLEM
我的问题
You can see I'm using conditional statements to control the positioning of the blue tabs, depending on what scroll point they are at.
您可以看到我正在使用条件语句来控制蓝色选项卡的位置，具体取决于它们所在的滚动点。
The yellow columns represent the tab containers, and I'm tyring to use a if elsestatement to control the bottom positioning so the blue tabs never go outside the yellow containers.
黄色列代表选项卡容器，我很想使用if else语句来控制底部定位，因此蓝色选项卡永远不会超出黄色容器。
But I can't get this to work. My bottom positon offset does not work.
但我无法让它发挥作用。我的底部位置偏移不起作用。
var $tab = $('.tab-button');
$(window).bind("resize.browsersize", function() {
var windowHalf = $(window).height() / 2,
content = $("#content"),
pos = content.offset();
$(window).scroll(function(){
if ($(window).scrollTop() >= pos.top + windowHalf ){
$tab.removeAttr('style').css({ position:'fixed', top:'50%'});
} else if ($(window).scrollTop() >= pos.bottom + windowHalf ){
$tab.removeAttr('style').css({ position:'absolute', bottom:'0px'});
} else {
$tab.removeAttr('style').css({ top: $(window).height() + 'px' });
}
});
}).trigger("resize.browsersize");
?
?
Can anyone please help me understand where I'm going wrong.
任何人都可以帮助我理解我哪里出错了。
Thanks Josh
谢谢乔希
回答by r0m4n
So it appears you must calculate the bottom offset of an element manually. I tried to find something to make your life easier in the jQuery documentation but turned up with nothing. Supposedly offset only supports top/left
因此，您似乎必须手动计算元素的底部偏移量。我试图在 jQuery 文档中找到一些让你的生活更轻松的东西，但一无所获。据说 offset 只支持 top/left
If we find the height of the wrapper, subtract the height of the tabs, we can figure out exactly where to limit the tab scroll.
如果我们找到包装器的高度，减去标签的高度，我们就可以准确地找出限制标签滚动的位置。
Also I included a jQuery css definition of the tab top. Without defining it onload, there was a weird document height change before the first scroll.
此外，我还包含了选项卡顶部的 jQuery css 定义。没有定义它 onload，在第一次滚动之前有一个奇怪的文档高度变化。
