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:

    1. Liabilities (for loading )
    2. 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>

    1. https://jsfiddle.net/Romanzhivo/2vdp8aqp/1
    2. https://jsfiddle.net/Romanzhivo/2vdp8aqp/3/
    3. https://jsfiddle.net/Romanzhivo/2vdp8aqp/6/


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2