我正在处理的网站有几个div
部分,每个部分都是视口的宽度和高度。它们垂直堆叠,每个都有相对定位(见Codepen)。每个元素内部都是固定位置h1
。我希望每个元素中的固定h1
仅在其各自的父元素可见时才保持可见。
我已经尝试了许多z-index实验但没有成功。关于下一步该尝试的任何想法?
答案 0 :(得分:1)
由于固定位置元素位于视口中而不是DOM中。这意味着您需要操纵HTML标记,使您想要做的事几乎不可能。
但有两个选项,首先是将位置改为绝对(对位置的调整基于相对,绝对,固定或DOM根位置的壁橱父级)并隐藏适当的父元素。
第二个选项是简单地使用您喜欢的JS库隐藏和显示固定元素,以响应用户交互而不是包装它。
答案 1 :(得分:0)
你可以使用js来实现结果。这是jQuery的example。
function showCurrentTitle(){
jQuery('.section h1').hide()
.each(function(i, el){
var o = parseInt(jQuery(this).parent().offset().top);
var h = jQuery(this).height();
if(o <= jQuery(document).scrollTop() ||
o + h < jQuery(document).scrollTop() + jQuery(this).height()){
jQuery(this).show();
};
});
}
showCurrentTitle();
jQuery(document).scroll(function(e){
showCurrentTitle();
});