//我试图找到具有类似细节但未找到任何细节的线程。如果之前已经讨论过，我事先道歉。在这种情况下，请给我一个链接或类似的.//
我发现的代码并不完全是我想要的，但是通过改变它可能会给我想要的东西？页面包含三个主要DIV，即标题（放置徽标），主体div和页脚div（我希望徽标淡入淡出，如下所述滚动。标题div的高度为60像素
需要什么
- 在头部会有徽标img或徽标文字。徽标将始终固定在顶部，不需要淡出并且不可见。一直都可见。 - 当顶部的徽标因正常向下滚动页面而消失时。我希望在页脚div中放置一个徽标以淡入并显示并且只要顶部徽标不可见就会显示。如果再次向上滚动，则页脚徽标会淡出并消失。
页面我希望这个效果可以在这个link找到，这样你就可以更容易想象我想要什么。我假设在此thread中找到的此代码中的某些元素可能有用。请告诉我需要改变什么以使其工作与我想要实现的目标相关。我之前的尝试并没有成功
答案 0 :(得分：0)
如果我理解正确，您希望根据标题中徽标的可见性来控制页脚中徽标的可见性。
您可以使用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>
答案 1 :(得分：0)
这里有一些快速的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> 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>