This question has already been answered:

Hello! A little confused ...

There is a navigation bar in the header of the site, which has 2 stages:

  1. Passive (when booting)
  2. After scrolling (see unbounce.com)

In the header, in addition to the standard links "Home", "Services", there should be an order button, which will appear only in the scrolling stage.

How to do this?

.nav .scrolled {? }

Roughly speaking, a copy of unbounce.com

Add this link to the navigation panel's html and make it visible only in .nav .scrolled?

Completely confused.

Thank!

Reported as a duplicate by participants aleksandr barakin , Bald , Grundy , D-side , Nick Volynkin ♦ Jul 12 '16 at 7:00 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

    1 answer 1

    Apparently, you need one of these options:

    1. An example of adding an element to the markup 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. An example of adding an element to the markup on pure 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. An example of hiding / showing an element that already exists in the markup when using jQuery and the css 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/
    • Thank! Is it possible without js? - Erik Vlasovs
    • Those. navigation after scrolling will be .nav .scrolled A ".a .hidden" will be visible only when .scrolled By the way, yes - Erik Vlasovs
    • @Erik Padamans .nav and .scrolled are simply classes for an element, with which css can be used to describe the rules for styling and positioning an element. If during scrolling you add the scrolled class, you can show / hide the link (the <a> element) to attach to it, for example, .nav.scrolled .link {display: inline-block;} Perhaps you can do it somehow without js , but scrolling is an event, and it needs to be somehow tracked. Javascript is used for this purpose. - Romanzhivo
    • Thanks, already done! Yes, understand. Just in my case, it was only necessary to make a separate class :) - Erik Vlasovs