当Section在视口中时jQuery Show/Hide Div [英] jQuery Show/Hide Div when Section is in Viewport

问题描述

此刻我的代码在这里: http://www.jaygeorge.co.uk/gwennan-sage

您将在页面底部看到两个固定位置的绿色箭头. 当无法查看时间轴"部分时，最好使用fade()技术使jQuery隐藏这些div(#timeline-buttons)时遇到麻烦.

我已经尝试过使用Viewport插件，但是无法使其与if语句一起正常工作，我敢肯定，可以通过某种方式测量div的高度来使用普通的jQuery完成它.

任何建议，谢谢，

解决方案

隐藏绿色箭头，然后滚动，测试一下时间轴div的位置是否大于窗口高度加滚动偏移量.如果更大，则表示时间轴div可见，并且应该显示箭头.

这里是一个简短的小提琴，演示了这种效果: http://jsfiddle.net/EADDt/

My code at the moment is here: http://www.jaygeorge.co.uk/gwennan-sage

You'll see two green arrows that are in a fixed position at the bottom of the page. I'm having trouble getting jQuery to hide these divs (#timeline-buttons) when the Timeline section is NOT in view, preferably using the fade() technique.

I've tried a Viewport plugin but can't get it to work properly with if statements, I'm sure it can be done with normal jQuery by measuring div heights somehow.

Any advice appreciated, thanks in advance.

解决方案

Hide the green arrows and then onscrolling, test to see if the timeline div position is greater than the window height plus scrolling offset. If greater then that means that the timeline div is in view and the arrows should be shown.

Here is a quick fiddle demonstrating the effect: http://jsfiddle.net/EADDt/

这篇关于当Section在视口中时jQuery Show/Hide Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！