Когда текст приходит в другом текстовом перемещении

Question

Логотип появляется при прокрутке вниз, но текст рядом с этим логотипом перемещается, когда он исчезает. Есть ли другой способ исправить его, чем «position: absolute;» ? Итак, текст должен оставаться там, где он находится в начале.

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>

Answer 1

Лучше держать логотип из потока путем добавления position: absolute или что-то, чтобы сделать его держать свою позицию вне, не нарушая текст. Очевидно, что в небольших устройствах это невозможно, так как это испортит макет путем перекрытия.

Это то, что я добавил в CSS:

.logo { 
    position: absolute; 
} 
@media screen and (max-width: 500px) { 
    .logo { 
    position: static; 
    } 
} 

Смотрите решение у меня есть:

$('.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; 
 
} 
 
.logo { 
 
    position: absolute; 
 
} 
 
@media screen and (max-width: 500px) { 
 
    .logo { 
 
    position: static; 
 
    } 
 
}

<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> 
 

 
<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>

Примечание: Это лучше не hotlink CSS из W3Schools.

Выход: http://output.jsbin.com/kaqijohayo