当 #pre-footer
或 #footer
div 可见时,我需要将类 .hidden
切换到我的粘性菜单 window 。
我一直在搞乱 jquery 和 scrollTop();
但似乎无法让它继续下去。任何帮助将不胜感激
$(document).ready(function() {
var $window = $(window);
var tabwrap = $('.tab-wrap');
var prefooter = $('#pre-footer');
$window.on('scroll', function() {
var scrollTop = $window.scrollTop();
tabwrap.toggleClass('hidden', scrollTop > 300); /* Help! */
/* .tabwrap should toggle class .hidden when #pre-footer and or #footer is visible in window */
});
});
到目前为止的 fiddle :https://jsfiddle.net/gavinfriel/4tcjnoxp/5/
最佳答案
所以基本上你想在视口(viewport)底部与 #pre-footer
底部对齐时切换类。所以当视口(viewport)的scrollTop
值+高度大于pre-footer
的顶部位置+#pre-footer
的高度
$(document).ready(function() {
var $window = $(window);
var tabwrap = $('.tab-wrap');
var prefooter = $('#pre-footer');
var prefooter_top = prefooter.offset().top;
var prefooter_height = prefooter.height();
var prefooter_bottom = prefooter_top + prefooter_height;
console.log(prefooter_bottom);
$window.on('scroll', function() {
var scrollTop = $window.scrollTop();
var viewport_height = $(window).height();
var scrollTop_bottom = scrollTop + viewport_height;
tabwrap.toggleClass('hidden', scrollTop_bottom > prefooter_bottom);
});
});
关于jquery - 当另一个 div 在窗口中可见时隐藏元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47166925/