0
スクロールするとロゴが表示されますが、フェードインするとそのロゴの横のテキストが移動します。 ？ テキストは最初の位置にとどまらなければなりません。テキストが他のテキストの移動に含まれるとき
JS：
$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position', 'fixed').css('top', '0').css('margin-top', '0').css('z-index', '500').removeClass('original').hide();
scrollIntervalID = setInterval(stickIt, 10);
function stickIt() {
var orgElementPos = $('.original').offset();
orgElementTop = orgElementPos.top;
if ($(window).scrollTop() >= (orgElementTop)) {
orgElement = $('.original');
coordsOrgElement = orgElement.offset();
leftOrgElement = coordsOrgElement.left;
widthOrgElement = orgElement.css('width');
$('.cloned').css('left', leftOrgElement + 'px').css('top', 0).css('width', widthOrgElement).show();
$('.original').css('visibility', 'hidden');
} else {
$('.cloned').hide();
$('.original').css('visibility', 'visible');
}
}
$(document).ready(function() {
$('.logo').hide();
});
$(document).scroll(function(e) {
if (document.body.scrollTop >= 76) {
$('.logo').fadeIn();
} else {
$('.logo').fadeOut();
}
});body,
head {
padding: 0px auto;
margin: 0px auto;
width: 100%;
height: 3000px;
}
#head {
background-color: white;
color: white;
padding-left: 30px;
padding-bottom: 8px;
padding-top: 8px;
}
.nav {
list-style: none;
margin: 0;
padding: 0;
background-color: #3279B8;
color: #fff;
padding-left: 30px;
padding-bottom: 0px;
padding-top: 4px;
font-family: Raleway-Regular;
font-size: 23px;
}
.nav a {
display: inline-block;
padding: 15px 30px 15px 30px;
}
.nav li {
display: inline;
}
.menu a {
display: inline-block;
text-decoration: none;
}
.menu a:after {
content: "";
display: block;
width: 100%;
opacity: 0;
border-bottom: 2px solid #ffffff;
padding-bottom: 1px;
margin: 0 auto;
transition: all 0.3s linear 0s;
}
.menu a:hover:after {
opacity: 1;
}
.logo {
position: relative;
}
.link {
margin-left: 35%;
color: #fff;
}
a {
color: #fff;
}
Fonts:(I know they fucked up...)
@font-face {
font-family: Kaushan Script;
src: url(font/KaushanScript.otf);
}
@font-face {
font-family: Quicksand-Regular;
src: url(font/Quicksand-Regula
r.ttf);
}
@font-face {
font-family: Quicksand-Bold;
src: url(font/Quicksand-Bold.ttf);
}
@font-face {
font-family: Quicksand-Light;
src: url(font/Quicksand-Light.ttf);
}
@font-face {
font-family: Raleway-Regular;
src: url(font/Raleway-Regular.ttf);
}
@font-face {
font-family: Raleway-ExtraLight;
src: url(font/Raleway-ExtraLight.ttf);
}
@font-face {
font-family: Raleway-Light;
src: url(font/Raleway-Light.ttf);
}
@font-face {
font-family: Raleway-Medium;
src: url(font/Raleway-Medium.ttf);
}
#font1 {
font-family: Kaushan Script;
font-size: 40px;
color: #3279B8;
}
#font1-1 {
font-family: Kaushan Script;
font-size: 32px;
color: #ffffff;
}
#font2 {
font-family: Quicksand-Bold;
font-size: 35px;
margin-left: 8px;
color: #A3A3A3;
}
#font2-2 {
font-family: Quicksand-Bold;
font-size: 32px;
margin-left: 8px;
color: #A3A3A3;
}
#font3 {
font-family: Quicksand-Light;
font-size: 30px;
color: #3F3F3F;
}
#font4 {
font-family: Raleway-ExtraLight;
font-size: 22px;
color: #3F3F3F;
}
#Bla {
float: right;
padding-top: 9px;
padding-right: 30px;
}<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<body style="background-color: white;">
<div class="w3-container w3-xlarge" id="head">
<h id="font1">Loftus</h>
<h id="font2">DENTAL</h>
<div id="Bla">
<h id="font3">Bla</h>
<h id="font4">&</h>
<h id="font3">bla</h>
</div>
</div>
<div class="menu">
<ul class="nav">
<h class="logo">
<h id="font1-1">Loftus</h>
<h id="font2-2">DENTAL</h>
</h>
<h class="link">
<li> <a href="#">Home</a>
</li>
<li> <a href="#">Photo's</a>
</li>
<li> <a href="#">Contact</a>
</li>
</h>
</ul>
</div>
<div style="width:100%; height:100%; background-color: white;">
Hi
<br>
Hi
<br>
Hi
<br>
Hi
<br>
Hi
<br>
Hi
<br>
Hi
<br>
Hi
<br>
Hi
<br>
Hi
<br>
Hi
<br>
Hi
<br>
Hi
<br>
Hi
<br>
Hi
<br>
Hi
<br>
Hi
<br>
Hi
<br>
Hi
<br>
Hi
<br>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
... –
あなたがテキストを移動したくないと言うことを意味していますか？ –
@PraveenKumarはい！ –