javascript - 基于offset()创建onClick jquery工具提示。当用户到达底部时，一切都运行良好，工具提示实际上会隐藏

Question

我正在基于“offset()”创建 onClick jquery 工具提示。当用户处于底部时，一切都运行良好。工具提示实际上隐藏了。

很明显，我给主容器设置了“overflow:hidden”。但我想重新定位工具提示，或者这次可能不是根据偏移位置。

最终我不想隐藏它。

非常感谢任何建议或帮助。如果我无法以正确的方式解释它，请道歉。

这是代码和 fiddle 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();

    });

检查这个 fiddle http://jsfiddle.net/aZJuN/