Javascript 如何在粘性导航条下放置div？

在我的索引页面中，我使用了一个粘性导航条，我还使用了一个JavaScript代码，它测量屏幕的高度，当我们打开导航条时，它会粘在页面的底部，然后当我们滚动导航条进入页面的顶部时，它会粘在上面，但在我向下滚动后，翻转的立方体会粘在粘性导航条上，我该怎么办

这是我的问题的图像

这是我的密码

@charset“utf-8”；
/*CSS文档*/
* {
框大小：边框框；
}
/*造型*/
身体{
字体系列：Arial、Helvetica、无衬线字体；
保证金：0；
背景：url（“background.jpg”）；
背景位置：中心；
背景尺寸：封面；
背景附件：固定；
过渡：所有400ms立方贝塞尔（0.25,0.1,0.25,1）0；
-webkit过渡：所有400ms立方贝塞尔（0.25,0.1,0.25,1）0s；宽度：100%；
}
/*标题/标志标题*/
.标题{
填充：80px；
文本对齐：居中；
颜色：白色；
}
/*增加标题的字体大小*/
.标题h1{
-webkit文本笔划：2px黑色；
颜色：rgba（255248248,0.22）；
}
.标题p{
-webkit文本笔划：1px黑色；
颜色：rgba（255255,1）；
}
/*粘性导航栏-根据滚动位置在相对和固定之间切换。它是相对定位的，直到视口中满足给定的偏移位置，然后它“固定”在适当的位置（如位置：固定）。IE或Edge 15及更早版本不支持粘性值。但是，对于这些版本，导航栏将继承默认位置*/
navbar先生{
溢出：隐藏；
背景色：#333；
位置：粘性；
职位：-网络工具包粘性；
排名：0；
页边距底部：0！重要；
}
/*设置导航栏链接的样式*/
纳瓦尔先生{
浮动：左；
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 20px；
文字装饰：无；
}
/*右对齐链接*/
.导航栏a.对{
浮动：对；
}
/*悬停时更改颜色*/
.导航栏a:悬停{
背景色：#ddd；
颜色：黑色；
}
/*活动/当前链接*/
.导航栏a.激活{
背景色：#666；
颜色：白色；
}
/*柱状容器*/
.第{
显示：-ms flexbox；/*IE10*/
显示器：flex；
-ms flex wrap:wrap；/*IE10*/
柔性包装：包装；
溢出：隐藏；
}
/*创建两个相邻的不相等列*/
/*侧栏/左栏*/
.这边{
-ms flex:30%；/*IE10*/
弹性：30%；
背景色：#f1f1；
填充：20px；
}
/*主栏*/
.main{
-ms flex:70%；/*IE10*/
弹性：70%；
背景色：白色；
}
.main：：之后{
内容：“；
明确：两者皆有；
显示：表格；
}
/*假图像，仅此示例*/
fakeimg先生{
背景色：#aaa；
宽度：100%；
填充：20px；
}
/*页脚*/
.页脚{
填充：20px；
文本对齐：居中；
背景：ddd；
}
/*响应式布局-当屏幕宽度小于700px时，使两列堆叠在彼此的顶部，而不是相邻*/
@媒体屏幕和屏幕（最大宽度：700px）{
.第{
弯曲方向：立柱；
}
}
/*响应式布局-当屏幕宽度小于400px时，使导航链接堆叠在彼此的顶部，而不是彼此相邻*/
@媒体屏幕和屏幕（最大宽度：400px）{
纳瓦尔先生{
浮动：无；
宽度：100%；
}
}
.集装箱{
字体系列：Arial；
宽度：100%；
背景色：rgb（48,48,48）；
溢出：隐藏；
}
.容器：：之后{
内容：“；
明确：两者皆有；
显示：表格；
填充物：5px；
}
.翻转父对象{
位置：相对位置；
透视图：1200像素；
垂直对齐：基线；
边缘底部：-0px；
溢出：隐藏；
}
.翻转{
-webkit变换原点：中间-底部；
-moz变换原点：中心-底部；
-ms变换原点：中心-底部；
-o-变换-原点：中心-底部；
/*变换原点：中心-底部*/
盒影：rgb（0,0,0）0px 0px 0px 0px；
变换：translateY（0px）；
高度：770px；
宽度：100%；
颜色：白色；
字体大小：24px；
/*以我们的内容为中心*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
溢出：隐藏；
}
.翻转：之前{
宽度：100%；
z指数：2；
文本转换：大写；
}
#首先{
背景色：#D64541；
浮动：对；
填充物：5px；
空白：预处理；
}
#第二{
背景色：#593；
浮动：对；
填充物：5px；
}
#第三{
背景色：#E08283；
浮动：对；
}
#第四{
背景色：#E08283；
浮动：对；
}

页面标题
window.console=window.console | |函数（t）{}；
if（document.location.search.match（/type=embed/gi））{
window.parent.postMessage（“resize”、“*”）；
}
数字世界
世界最佳建筑网站

关于我
我的照片：
形象
一些关于我的文字在《罪过》中

更多文本
同侧阴唇

图像

图像

形象




$（窗口）.on（'scroll'，函数（）{
$（'.flip'）。每个（函数（）{
var scrollTop=$（窗口）.scrollTop（），
parentElementOffsetTop=$（this）.parent（）.offset（）.top，
parentDistanceTop=parentElementOffsetTop-scrollTop；
var elementHeight=$（this.height（）；
var distanceBottom=parentDistanceTop+elementHeight；
var不透明度=距离底部/元素高度；
变量rotateSpeed=（parentDistanceTop/8）.toFixed（2）*-1；
如果（旋转速度=90）{
旋转速度=90；
}
$（this.find（“.pixel counter”）.html（distanceBottom+”px是父视图底部到视口顶部的距离）；
$（this.css）({
“变换”：“translateY（0px）rotateX（“+rotateSpeed+”deg）”，
“不透明度”：不透明度}）；
});
});
//#sourceURL=pen.js
页脚
如果