在offset()的基础上创建onClick jquery工具提示.当用户来到底部时，一切都很好地分开，工具提示实际上会

Question

我正在"offset()"的基础上创建onClick jquery工具提示。当用户处于最底层时，一切都能很好地分开。工具提示实际上会隐藏起来。

很明显，我给主容器指定了"overflow：hidden"。但我想重新定位刀具尖端，或者这次可能不是根据偏移位置。

最终我不想隐瞒它。

非常感谢任何建议或帮助。如果我不能以正确的方式解释，我深表歉意。

这是代码和小提琴URL:

$('#data-list > li').on('click', function(){        
var $this = $(this), thisoffset = $this.offset().top;
$('.active').removeClass('active');
$this.addClass('active');
$('.container-slide').animate({top:thisoffset-15}, 300).fadeIn();
});  

http://jsfiddle.net/mufeedahmad/ndk44/12/

提前谢谢。

Answer 1

基本上，您必须检查容器幻灯片是否从包装盒中取出。您可以添加此行

if(thisoffset + $('.container-slide').height() > $(".wrapper").height())thisoffset = $(".wrapper").height() - $('.container-slide').height() + 15;

所以最后的代码变成

$('#data-list > li').on('click', function(){        
var $this = $(this), thisoffset = $this.offset().top;
if(thisoffset + $('.container-slide').height() > $(".wrapper").height())thisoffset = $(".wrapper").height() - $('.container-slide').height() + 15;
$('.active').removeClass('active');
$this.addClass('active');
$('.container-slide').animate({top:thisoffset-15}, 300).fadeIn();
});

检查这把小提琴http://jsfiddle.net/aZJuN/

Answer 2

var divleftoffset = $(".wrapper").offset().left - $(document).scrollLeft();

var left = event.pageX; -$(document).scrollLeft();
menuWidth = $(".container-slide").width();
divWidth = $(".wrapper").width();
menuleft = menuWidth + left;
divleft = divleftoffset + divWidth;
var right;
if (menuleft > divleft) {
left = left - menuWidth;
}
var divrightoffset = $(".wrapper").offset().top - $(document).scrollTop();
var Top = event.pageY; -$(document).scrollTop();
menuHeight = $(".container-slide").height();
divHeight = $(".wrapper").height();
menuTop = menuHeight + Top;
divTop = divrightoffset + divHeight;
var right;
if (menuTop > divTop) {
Top = Top - menuHeight;
}
$('.active').removeClass('active');
$this.addClass('active');
$('.container-slide').animate({ top: Top - 15 }, 300).fadeIn();