向下滚动时，徽标显示在固定页脚div中
[英]Logo to appear in fixed footer div when scrolling down
问题描述
//I have tried to find threads with similar specifics but has not found any. 
//我试图找到具有类似细节的线程，但是没有找到任何线程。 I apologize on beforehand if this has been discused before. 如果之前已经讨论过，我对此表示歉意。 In that case please give me a link or similar.// 在这种情况下，请给我一个链接或类似链接。
The code I found is not exactly what I want but with sone changes it might could give what I want? 我找到的代码不完全是我想要的，但是经过一些更改，它可能会给出我想要的？ Page contain of three main DIVs that is header (where logo is placed), main body div, and the footer div (where I want logo to fade in and out regards to the scrolling described below. The header div has the height of 60 px. 页面包含三个主要DIV，分别是页眉（放置徽标），主体div和页脚div（我希望徽标随以下所述的滚动而淡入和淡出。页眉div的高度为60 px 。
WHAT NEEDED 需要什么
-In head there will be a logo img or logo text. -头部会出现徽标img或徽标文字。 logo will be fixed at top all the time and do not need to fade out and be unvisible. 徽标将始终固定在顶部，并且无需褪色并且不可见。 Just visible all the time. 一直可见。 - when logo in top disappears because of normal scrolling down the page. -由于正常向下滚动页面而导致顶部的徽标消失时。 I want a logo placed in the footer div to fade in and appear and be visible as long as the top logo not are visible. 我希望放置在页脚div中的徽标淡入并显示出来，并且只要顶部徽标不可见即可。 If scrolling up to the top again the footer logo fade out and disappear. 如果再次滚动到顶部，则页脚徽标逐渐淡出并消失。
Page I want this effect on can be found in this link , this so you easier can imagine what I want. 我想要此效果的页面可以在此链接中找到，这样您就可以轻松想象我想要什么。 I assume that some elements in this code found in this thread might be of use. 我假设在此线程中找到的此代码中的某些元素可能有用。 Please advice me on what needs to be changed to make it work regards what I want to achieve. 请根据需要实现的建议给我一些建议，以使其能够正常工作。 My attempts earlier has not been succesfull 我之前的尝试未成功
2 个解决方案
解决方案1
0 2017-01-18 22:38:34
If I understand you correctly, you want to control the visibility of the logo in the footer based on the visibility of the logo in the header. 如果我理解正确，则希望基于页眉中徽标的可见性来控制页脚中徽标的可见性。
You can achieve this very easily with headroom.js 您可以使用headroom.js轻松实现此目标
Code sample: 代码示例：
var header = document.querySelector("header"); var options = { offset:100, onUnpin: function () { $('footer .logo').fadeIn(); }, onTop: function() { $('footer .logo').fadeOut(); } }; var headroom = new Headroom(header, options); headroom.init();
header, footer { width:100%; height:100px; background-color:#ddd; text-align:center; } footer { position:fixed; bottom:0; } footer .logo { display:none; } main img { max-width:100%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://npmcdn.com/headroom.js@0.9.3/dist/headroom.min.js"></script> <body> <header> <h1 class="logo">LOGO </h1> </header> <main> <img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Brigantine-Falado-von-Rhodos-1999-07.jpg"> </main> <footer> <h1 class="logo">LOG O</h1> </footer> </body>
解决方案2
0 2017-01-18 22:47:39
Here's some quick jQuery that will move the logo depending on where you've scrolled. 这是一些快速的jQuery，它将根据您滚动的位置移动徽标。 Just add a class .hasLogo to #myTopnav and watch/manipulate that. 只需将类.hasLogo添加到#myTopnav并进行观看/操作即可。
var $tn = $('#myTopnav'), $header = $tn.find('li').eq(1), $logo = $header.find('img'), $footer = $('#FooterDiv'), tnTop = $tn.offset().top, tnHeight = $tn.outerHeight(), tnBot = tnTop + tnHeight; $(window).scroll(function() { var scrollTop = $(window).scrollTop(); if (scrollTop > tnBot) { if (! $footer.hasClass('hasLogo')) { $logo.appendTo($footer); $footer.addClass('hasLogo'); $tn.removeClass('hasLogo'); } } else if (! $tn.hasClass('hasLogo')) { $logo.appendTo($header); $tn.addClass('hasLogo'); $footer.removeClass('hasLogo'); } })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!doctype html> <html style="height:100%"> <head><meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <link rel="stylesheet" type="text/css" href="http://proffinfo.com/stylesheet/proffinfo.css"> <style> body { margin:0; background-image: url("proffinfo/img/fishing2.jpg"); background-color: grey; } body { font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.3em; word-wrap: break-word; } h1, h2, h3, h4, h5, h6 { line-height: 1em; font-weight: 700; } p { line-height: 1.3em; font-weight: 300; } body { font-size: 1.2em; } @media screen and (min-width: 680px) { body { font-size: 1.4em; } } @media screen and (min-width: 1224px) { body { font-size: 1.6em; } } @media screen and (min-width: 1400px) { body { font-size: 1.8em; } } h1 { font-size: 2em; } h2 { font-size: 1.8em; } h3 { font-size: 1.6em; } h4 { font-size: 1.4em; } h5 { font-size: 1.2em; } p { font-size: 1.2em; } h6 { font-size: 1em; } body {margin:0;} ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; border-top-style: solid; border-top-width: 1px; border-top-color: grey; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: grey; } ul.topnav li {float: left;} ul.topnav li a { display: inline-block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; transition: 0.3s; font-size: 23px; } ul.topnav li a:hover {background-color: #282828;} ul.topnav li.icon {display: none;} @media screen and (max-width:680px) { ul.topnav li:not(:first-child) {display: none;} ul.topnav li.icon { float: right; display: inline-block; } } @media screen and (max-width:680px) { ul.topnav.responsive {position: relative;} ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } } div properties mainbody #container { position: relative; width: 100%; } .container div { height: '; } .column-left { width: 10%; left: 0; background: ; position: absolute; } .main-body { width: 78%; background: ; margin-left: 11%; margin-right: 11%; position: absolute; } .column-right { width: 10%; height: 70%; right: 0; position: absolute; background: ; } #FooterDiv { margin: auto; position: fixed; margin: auto; left: 0; width: 100%; } </style> <script> //topmenu function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> </head> <body style="height:70%"> <div id="full" style="z-index: 1; left: 0px; top: 50px; width: 530px; height: 100%; width: 100%;"> <div id="header" style="z-index:; height: 60px; width: 100%; background-color:; visibility: visible; "> <font color="grey"><h1> ProffInfo</h1></font> <ul class="topnav hasLogo" id="myTopnav"> <li> </li> <li><a class="active" href="#home"><img height="21" width="21" align="middle" src="http://shababsa7.net/images/PageImage-515435-3918738-home_icon.png"></a></li> <li><a href="http://proffinfo.com/mainpage/omoss.php" size="10">Om oss</a></li> <li><a href="http://proffinfo.com/mainpage/tjenester.php">Våre tjenester</a></li> <li><a href="http://proffinfo.com/forum">Forum</a></li> <li><a href="http://proffinfo.com/mainpage/tjenester.php">Kontakt</a></li> <li class="icon"> <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()"> </a> </li> </ul> </div> <br><br><br> <div style='position:absolute; top:200; left:0; width:100%; height:1000px; background-color:;' > <div class="container"> <div class="main-body"> <br> <b> <h1>body contents go</h1></b> <br> here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here body contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go herebody contents go here </div> </div> <div class="column-left">column-left</div> <div class="column-right">Column-right</div> </div> </div> <div id="FooterDiv" style='position:fixed; bottom:0; left:0; width:100%; background-color:#252525; border-top: 1px solid grey; border-bottom: 1px solid grey;'> <font size"5" color="grey"> <center>© ProffInfo.com<br>Din nettleverandør</a></center> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
向下滚动页面时如何使徽标出现在固定菜单中 - how to make logo appear in fixed menu when scrolling down page
固定 div 在移动设备上向下滚动时显示 - fixed div showing when scrolling down on mobile
在滚动的 div 下隐藏固定的徽标 - Hide a fixed logo beneath a scrolling div
滚动时固定，但停在页脚 - fixed when scrolling but stop at footer
在向下滚动时保持固定的div - Sticking a fixed div on scrolling down
如何在向下滚动时从顶部显示div？ - How to make div appear from the top when scrolling down?
向下滚动时，在顶部浏览器中以固定模式创建div - making a div in fixed mode in top browser when scrolling down
滚动时需要修复 div 但当页脚显示时不应修复 div - Need to fix div when scrolling but when footer will display then div should not be fixed
当滚动时在屏幕上显示页脚Div时，隐藏固定的Div - Hide a fixed Div, when footer Div shows up in the screen while scrolling
向下滚动时如何缩小徽标大小？ - How to shrink logo size when scrolling down?
相关标签