向下滚动时出现在固定页脚 div 中的徽标答案

【问题标题】：Logo to appear in fixed footer div when scrolling down向下滚动时出现在固定页脚 div 中的徽标
【发布时间】：2017-06-03 11:35:39
【问题描述】：

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

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

需要什么

-head 中会有一个 logo img 或 logo text。 logo会一直固定在顶部，不需要淡出不可见。只是一直可见。 - 当顶部的标志因为正常向下滚动页面而消失时。我希望放置在页脚 div 中的徽标淡入并出现并可见，只要顶部徽标不可见。如果再次向上滚动到顶部，页脚徽标会淡出并消失。

我想要这个效果的页面可以在这个link找到，这样你就更容易想象我想要什么了。我假设在此thread 中找到的此代码中的某些元素可能有用。请就我想要实现的目标向我提出建议，以使其发挥作用。我之前的尝试没有成功

【问题讨论】：

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

标签： javascript html css

【解决方案1】：

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

您可以通过headroom.js 轻松实现这一目标

代码示例：

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">L O G O </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">L O G O</h1>
  </footer>
</body>

【讨论】：

【解决方案2】：

这里有一些快速的 jQuery，它将根据您滚动的位置移动徽标。只需将 .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>&nbsp;&nbsp;ProffInfo</h1></font>

<ul class="topnav hasLogo" id="myTopnav">
  <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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&aring;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>&#169 ProffInfo.com<br>Din nettleverand&oslash;r</a></center>

    
    </div>


</body>
</html>

【讨论】：