Javascript 用于无限滚动的相交观察者API

我正在做一个twitch网络应用程序。我尝试使用Intersection observer API来实现无限滚动，而且效果很好。然而，我注意到，当无限滚动工作时，我的导航栏完全消失了。我猜问题是由“DOMContentLoaded”引起的，但不确定。多谢各位

这是我的代码笔链接：

const clientID='5npghe3kytuifete3z9kvwnto50mqch'；
const req=new XMLHttpRequest（）；
函数名为ror（）{
警报（“错误”）；
}
函数getResp（url，回调）{
请求打开（'GET'，url，true）；
请求setRequestHeader（'Client-ID'，clientID）；
req.setRequestHeader（'Accept'，'application/vnd.twitchtv.v5+json'）；
请求发送（）；
req.onload=函数（）{
如果（请求状态>=200&请求状态<400）{
让数据
试一试{
data=JSON.parse（请求响应）
}捕捉（错误）{
淋浴器（）；
返回；
}
回调（数据）
}否则{
淋浴器（）；
}
}
}
const navList=document.querySelector（'.nav___列表'）
const streamBox=document.querySelector（'.stream_-box'）
const streamItems=document.querySelector（“.streamItems”）
const langFilter=document.querySelector（“.langFilter”）
const langArr=['ALL'，'EN'，'ZH'，'ES'，'FR'，'DE'，'RU'，'KO'，'JA'，'PT'，'AR']；
常数urlRoot=https://api.twitch.tv/kraken/'
const topGameurl=`${urlRoot}游戏/top？limit=5`
const streamApi=`${urlRoot}流/`
设偏移量=0
document.addEventListener（'DOMContentLoaded'，（）=>{
const target=document.querySelector（“.stream end”）
让选项={
root:null，
rootMargin:'30px'，//查看整个视口
阈值：0.5，//如果页脚的50%
}
const observer=新的IntersectionObserver（handleIntersection，选项）
观察者，观察（目标）
})
函数handleIntersection（条目）{
if（条目[0]。isIntersecting）{
让gameTitle=document.querySelector（“.gameTitle”）
让gameURLname=encodeURIComponent（gameTitle.innerHTML）
const loadmorestreamUrl=createURL（streamApi、gameURLname、偏移量）
偏移量+=100
getData（loadmorestreamUrl）
}
}
函数createURL（url、游戏、偏移）{
const streamUrl=`${url}？game=${game}&limit=20&offset=${offset}`
返回streamUrl
}
getResp（topGameurl，（数据）=>{
const topGames=[…data.top]
const result=topGames.reduce（（结果，项目）=>{
结果+=`
${item.game.name}
`
返回结果
}, '')
navList.innerHTML=结果
const gameName=encodeURIComponent（data.top[0].game.name）
const streamUrl=createURL（streamApi、游戏名、偏移量）
getData（streamUrl）
})
navList.addEventListener（'click'，e=>{
streamItems.innerHTML=“”
让gameTitle=document.querySelector（“.gameTitle”）
const gameName=e.target.innerHTML
gameTitle.innerHTML=游戏名称
const gameNameURL=encodeURIComponent（gameName）
const streamUrl=createURL（streamApi、gameNameURL、offset）
getData（streamUrl）
})
函数getData（url）{
getResp（url，（数据）=>{
const dataArrs=[…data.streams]
map（dataArr=>{
让streamItem=document.createElement（'div'）
streamItem.classList.add（'stream'）
streamItem.innerHTML=`
查看者：${dataArr.viewers}

${dataArr.channel.name}
${dataArr.channel.broadcase\u language.toUpperCase（）}
`
streamItems.appendChild（streamItem）
})
})
}

html，正文{
字体大小：16px；
框大小：边框框；
字体系列：“Segoe UI”，塔荷马，日内瓦，Verdana，无衬线；
背景：黑色；
背景附件：固定；
}
.集装箱{
宽度：90%；
保证金：0自动；
显示器：flex；
弯曲方向：立柱；
填充：2rem；
溢出x：隐藏；
}
#标题{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
颜色：#fff；
边缘底部：1.2rem；
}
navbar先生{
位置：相对位置；
转化：translateX（0%）；
}
.头衔{
右边距：1rem；
字号：2rem；
字体系列：“Segoe UI”，塔荷马，日内瓦，Verdana，无衬线；
字号：700；
颜色：#741cf7；
}
.导航列表{
显示器：flex；
}
.导航列表李{
填充：.8rem.6rem；
光标：指针；
字号：1rem；
字号：700；
}
.导航列表李：悬停{
边界半径：.5rem；
背景：#a87ceb；
过渡：背景。3s轻松；
}
.nav__列表li+li{
左边距：1 em；
}
#流箱{
显示器：flex；
弯曲方向：立柱；
边界半径：8px；
对齐项目：居中；
填充：1.5雷姆；
颜色：#fff；
位置：相对位置；
}
.游戏名称{
字号：2rem；
边缘底部：1rem；
字号：600；
颜色：#741cf7；
}
.前二十名{
字体大小：1.4rem；
保证金底部：1.5雷姆；
}
.流动项目{
显示器：flex；
柔性流：行换行；
宽度：100%；
证明内容：中心；
}
.lang__选项{
位置：绝对位置；
顶部：2rem；
右：7rem；
}
.lang___头衔{
字号：1.2rem；
颜色：#fff；
}
#语言{
大纲：无；
宽度：3rem；
背景：透明；
颜色：#741cf7；
边界：无；
字号：1rem；
}
.小溪{
宽度：30%；
保证金：1.5雷姆；
背景色：rgba（255、255、255、15）；
背景滤镜：模糊（5px）；
光标：指针；
}
.预览{
宽度：100%；
垂直对齐：中间对齐；
}
.观众{
显示：无；
}
.stream:hover>.viewers{
显示：块；
位置：绝对位置；
z指数：-1；
动画名称：移动；
动画持续时间：.4s；
动画计时功能：轻松；
动画填充模式：正向；
}
@关键帧移动{
从{
顶部：0px；
}
到{
顶部：-20px；
}
}
.拖缆{
显示器：flex；
对齐项目：居中；
填充：.5rem；
位置：相对位置；
颜色：#fff；
}
.标志{
宽度：15%；
边界半径：50%；
保证金权利：.8rem；
}
郎先生{
位置：绝对位置；
权利：.5rem；
底部：5雷姆；
}
.隐藏{
显示：无；
}
.检查{
显示：无；
}
.RWD开关{
显示：无；
}
.游戏名称{
颜色：#fff；
}
@媒体屏幕和屏幕（最大宽度：1024px）{
.lang__选项{
销售时点情报系统
function getResp(url, callback) {
  fetch(url, {
    headers: {
      'Client-ID': clientID,
      'Accept': 'application/vnd.twitchtv.v5+json'
    }
  })
  .then(response => response.json())
  .then(callback)
  .catch(showError)
}