Javascript 向下滚动时显示在固定页脚div中的徽标

//我曾试图找到具有类似细节的线程，但没有找到任何线程。如果之前已经讨论过这个问题，我会事先向您道歉。在这种情况下，请给我一个链接或类似的

我找到的代码并不完全是我想要的，但是经过一些更改，它可能会给出我想要的？页面包含三个主div，即放置徽标的页眉、主体div和页脚div，我希望徽标在下面描述的滚动中淡入淡出。收割台div的高度为60 px

需要什么

-在头部将有一个标志img或标志文本。徽标将始终固定在顶部，不需要褪色和不可见。一直可见。 -当顶部的徽标因正常向下滚动页面而消失时。我想在页脚div中放置一个徽标，以便淡入并显示，只要顶部徽标不可见，就可以看到。如果再次向上滚动到顶部，则页脚徽标将淡出并消失

---

我想要这个效果的页面可以在这里找到，这样你们就更容易想象我想要什么。我假设在这段代码中找到的一些元素可能有用。请给我一些建议，关于我想要实现的目标，哪些方面需要改变以使其发挥作用。我之前的尝试没有成功

如果我理解正确，您希望根据页眉中徽标的可见性控制页脚中徽标的可见性

您可以使用

代码示例：

var header=document.querySelectorheader； 变量选项={ 抵销：100， onUnpin：功能{ $'footer.logo'.fadeIn； }, onTop：函数{ $'footer.logo'。淡出； } }; var净空=新净空高度，可选； headloom.init； 标题， 页脚{ 宽度：100%； 高度：100px； 背景色：ddd； 文本对齐：居中； } 页脚{ 位置：固定； 底部：0； } 页脚.徽标{ 显示：无； } 主img{ 最大宽度：100%； } 奥戈 奥戈

---

下面是一些快速jQuery，它将根据您滚动的位置移动徽标。只需在myTopnav中添加一个class.hasLogo，并对其进行观察/操作即可

var$tn=$'myTopnav'， $header=$tn.find'li'.eq1， $logo=$header.find'img'， $footer=$'FooterDiv'， tnTop=$tn.offset.top， tnHeight=$tn.outerHeight， tnBot=tnTop+tnHeight； $window.scroll函数{ var scrollTop=$window.scrollTop； 如果scrollTop>tnBot{ 如果！$footer.hasClass'hasLogo'{ $logo.appendTo$footer； $footer.addClass'hasLogo'； $tn.removeClass'hasLogo'； } }否则，如果！$tn.hasClass'hasLogo'{ $logo.appendTo$header； $tn.addClass“hasLogo”； $footer.removeClass'hasLogo'； } } 身体{ 保证金：0； 背景图片：urlproffinfo/img/fishing2.jpg； 背景颜色：灰色； } 身体{ 字体系列：源Sans Pro、Helvetica Neue、Helvetica、Arial、Sans serif； 字体大小：100%； 线高：1.3em； 换行：断开单词；} h1、h2、h3、h4、h5、h6{ 线高：1米； 字体大小：700；} p{ 线高：1.3em； 字体大小：300；} 身体{ 字体大小：1.2em；} @媒体屏幕和最小宽度：680px{ 身体{ 字体大小：1.4em；}} @媒体屏幕和最小宽度：1224px{ 身体{ 字体大小：1.6em；} @媒体屏幕和最小宽度：1400px{ 身体{ 字体大小：1.8em；} h1{ 字体大小：2em；} 氢{ 字体大小：1.8em；} h3{ 字体大小：1.6em；} h4{ 字体大小：1.4em；} h5{ 字体大小：1.2em；} p{ 字体大小：1.2em；} h6{ 字号：1em； } 正文{页边距：0；} ul.topnav{ 列表样式类型：无； 保证金：0； 填充：0； 溢出：隐藏； 背景色：333； 边框顶部样式：实心； 边框顶部宽度：1px； 边框顶部颜色：灰色； 边框底部样式：实心； 边框底宽：1px； 边框底色：灰色； } ul.topnav li{float:左；} ul.topnav li a{ 显示：内联块； 颜色：F2F2； 文本对齐：居中； 填充：14px 16px； 文字装饰：无； 过渡：0.3s； 字体大小：23px； } ul.topnav li a:hover{背景色：282828；} ul.topnav li.icon{显示：无；} @媒体屏幕和最大宽度：680px{ ul.topnav li:not:first child{display:none；} ul.topnav li.icon{ 浮动：对； 显示：内联块； } } @媒体屏幕和最大宽度：680px{ ul.topnav.responsive{位置：相对；} ul.topnav.responsive li.icon{ 位置：绝对位置； 右：0； 排名：0； } ul.topnav.li{ 浮动：无； 显示：内联； } ul.topnav.lia{ 显示：块； 文本对齐：左对齐； } } div属性主体 容器{ 位置：相对位置； 宽度：100%； } .货柜组{ 高度：'； } .左栏{ 宽度：10%； 左：0； 背景：； 位置：绝对位置； } .主体{ 宽度：78%； 背景：； 左边缘：11%； 右边距：11%； 位置：绝对位置； } 公司 柱式右翼{ 宽度：10%； 身高：70%； 右：0； 位置：绝对位置； 背景：； } 页脚div{ 保证金：自动； 位置：固定； 保证金：自动； 左：0； 宽度：100%； } //顶部菜单 函数myFunction{ var x=document.getElementByIdmyTopnav； 如果x.className==topnav{ x、 className+=响应性； }否则{ x、 className=topnav； } } ProffInfo 身体内容消失了 此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到此处正文内容转到此处正文内容转到此处正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到此处正文内容转到此处正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到 herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到此处正文内容转到此处正文内容转到此处正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到此处正文内容转到此处正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿正文内容转到这儿herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到herebody内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处正文内容转到此处 左栏 右栏 &169 ProffInfo.comDin nettleverandø；R

---

到目前为止你试过什么？Stackoverflow不是免费的编码服务。您可以提供您尝试过的内容，社区将帮助您修复代码。我了解问题所在-请参阅下面的答案。