当部分位于视口中时 jQuery 显示/隐藏 Div
我目前的代码在这里： http://www.jaygeorge.co.uk/gwennan-sage
您将在页面底部的固定位置看到两个绿色箭头。 当时间轴部分不在视图中时，我很难让 jQuery 隐藏这些 div (#timeline-buttons)，最好使用 fade() 技术。
我已经尝试过 Viewport 插件，但无法让它与 if 语句一起正常工作，我确信它可以通过正常的 jQuery 通过以某种方式测量 div 高度来完成。
任何建议表示赞赏，提前致谢。
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
隐藏绿色箭头然后滚动，测试时间线div位置是否大于窗口高度加上滚动偏移量。如果更大，则意味着时间线 div 位于视图中并且应该显示箭头。
这是一个演示效果的快速小提琴： http://jsfiddle.net/EADDt/
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/
将这些箭头移至#gwennan-header 并删除固定的 css 属性并设置 z-index。这样你就根本不需要任何Javascript。
Move these arrows into
#gwennan-headerand remove the fixed css attribute and set the z-index. That way you won't need any Javascript at all.