How do we make two phases of the panel?
-
Hello! A little confused. ♪ ♪
There's a navigation panel in a hat of a site with two stages:
- Liabilities (for loading )
- After rolling (see unbounce.com )
In the hat, in addition to the standard references "Good," "Listen," there's got to be a book button that's only going to be in the middle of the roll.
How do you do that?
♪
In short, copy unbounce.com
Add this reference in the html navigation panel and make it visible only in .nav .scrolled ?
I'm confused.
Thank you!
-
Apparently, you need one of those options:
1. Example with the addition of the element in the marking when using jQuery
var element = $('.nav');$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if(scrollTop > 200) {
if(element.has('.link').length == 0)
element.append('<a href="#" class="link">Купите наш товар</a>')
} else {
$('.link').remove();
}
});.wrapp {
height: 3000px;
}
.nav {
position: fixed;
width: 100%;
height: 80px;
background-color: #084f70;
text-align: center;
}
.link {
display: inline-block;
font-weight: 500;
line-height: 1;
color: #FFFFFF;
padding: 32px 0;
text-transform: uppercase;
text-decoration: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapp">
<header class="nav"></header>
</div>2. Example with the addition of the element in the net JavaScript
var element = document.getElementsByClassName('nav')[0];
var link = document.createElement("a");
var linkText = document.createTextNode("Купите наш товар");
link.className = "link";
link.appendChild(linkText);
link.setAttribute("href", "#");window.onscroll = function() {
var scrollTop = window.scrollY;
var status = document.getElementsByClassName('link').length;
if(scrollTop > 200) {
if(status == 0) element.appendChild(link);
} else if(scrollTop <= 200 && status != 0) {
element.removeChild(link);
}
}.wrapp {
height: 3000px;
}
.nav {
position: fixed;
width: 100%;
height: 80px;
background-color: #084f70;
text-align: center;
}
.link {
display: inline-block;
font-weight: 500;
line-height: 1;
color: #FFFFFF;
padding: 32px 0;
text-transform: uppercase;
text-decoration: none;
}<div class="wrapp">
<header class="nav"></header>
</div>3. Example with the cover/demonstration of the already existing element in the marking using jQuery and cs-class
var element = $('.link');window.onscroll = function() {
var scrollTop = $(window).scrollTop();
var status = element.hasClass('show');
if(scrollTop > 200) {
if(status == 0) element.addClass('show');
} else if(scrollTop <= 200 && status != 0) {
element.removeClass('show');
}
}.wrapp {
height: 3000px;
}
.nav {
position: fixed;
width: 100%;
height: 80px;
background-color: #084f70;
text-align: center;
}
.link {
display: none;
font-weight: 500;
line-height: 1;
color: #FFFFFF;
padding: 32px 0;
text-transform: uppercase;
text-decoration: none;
}
.link.show {
display: inline-block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapp">
<header class="nav">
<a href="#" class="link">Купите наш товар</a>
</header>
</div>- https://jsfiddle.net/Romanzhivo/2vdp8aqp/1
- https://jsfiddle.net/Romanzhivo/2vdp8aqp/3/
- https://jsfiddle.net/Romanzhivo/2vdp8aqp/6/
