Javascript 当内容进入视图时显示固定标题

现在我有一些div，当你滚动过某个标记时会显示出来，但我意识到当浏览器调整大小时，这个div会被破坏。我有什么办法能让它有反应吗？我不确定是否添加$（窗口）。调整大小（检查）；也行

编辑： 最终目标是在相关内容进入视图时显示标题

HTML

这是装着所有东西的包装纸

#mini {width:100%; height:100%;
padding-top:140px;}

---

您要做的是查找目标内容并确定元素是否在视口中。如果是，则显示标题

这样，您就不需要使用data-*属性。您可以将标题放在主内容的元素中，然后使用jQuery的方法获取最接近的父元素（content元素）。从那里开始测试

HTML

亚玛
莫杜拉
电脑类
丸
寿司
寿司
熄灯

JS

$（窗口）。滚动（选中）；
函数checkY（）{
var top=$（window.scrollTop（）；
$（“.title”）。每个（函数（）{
var target=$（this）.closest（“.content”）；
//起始范围值仅为offset（）。顶部
var tTop=target.offset（）.top；
//“结束范围”值是“开始范围”值加上
//内容元素高度
var tBottom=tTop+target.outerHeight（）；
如果（top>=tTop&&top您所说的“断开”是什么意思？元素仍然显示在指定的范围内。例如，当页面在400和1150之间时，无论您如何调整窗口大小，第一个div仍然显示。或者您的意思是，在调整大小后，400和1150不再是有效的范围？似乎您想要的是在指定的范围内显示标题n内容在视口中这是正确的假设吗？是的！这是我知道的唯一方法。这是一种“视差”不同文本将在固定位置显示一段时间的效果，当您滚动其上方的内容时，将显示一个新标题。我是否可以将其与最近的父项偏移？现在，文本在容器顶部碰到视口顶部时显示。我是否可以使其在div时触发标题（在本例中为包装纸）点击顶部？请查看原始帖子，我添加了一张图片，应该会有所帮助！
<script>
    //Note you do not need to make an anonymous
    //function just to do the call for checkY
    //just pass the function
    $(window).scroll(checkY);

    function checkY() {
        //save this value so we dont have to call the function everytime
        var top = $(window).scrollTop();
        console.log(top);
        $(".title").each(function () {
            var positionData = $(this).data("position").split(",");
            if (top > positionData[0] && top <= positionData[1]) {
                console.log("Show");
                $(this).show();
            } else {
                console.log("Hide");
                $(this).hide();
            }
        });
    }
    checkY();
</script>

.title {
position:fixed;
top:0px;
left:45%;   
display:none;
padding:10px;
background:rgba(255,255,255,0);
color:#000;}
#Yama {

position:absolute;
display:block;
height:900px;
font-family: Arial, Helvetica, sans-serif; 
font-size:70pt; 
letter-spacing:0px; 
font-weight:100; 
-webkit-font-smoothing: antialiased;
text-align:center;}

#mini {width:100%; height:100%;
padding-top:140px;}

<div id="Yama" class="content">
    <div class="title">Yama</div>
</div>
<div id="Modurra" class="content">
    <div class="title">Modurra</div>
</div>
<div id="Computer" class="content">
    <div class="title">Computer</div>
</div>
<div id="Maru" class="content">
    <div class="title">Maru</div>
</div>
<div id="Sushi" class="content">
    <div class="title">Sushi</div>
</div>
<div id="Summit" class="content">
    <div class="title">Sushi</div>
</div>
<div id="LightsOut" class="content">
    <div class="title">Lights Out</div>
</div>

$(window).scroll(checkY);

function checkY(){
    var top = $(window).scrollTop();
    $(".title").each(function(){
       var target = $(this).closest(".content");

       //The start range value is just offset().top
       var tTop = target.offset().top;

       //The end range value is the start range value plus 
       //the content elements height
       var tBottom = tTop+target.outerHeight();

       if(top >= tTop && top <= tBottom){
           console.log("Show"); 
           $(this).show(); 
       } else {
           console.log("Hide"); 
           $(this).hide();
       }       
    });
}
checkY();