Hide / show div on scroll, within another scroll function

Reasons why your code is not working:

• You are trying to select .toolbar-container
  
  before loading the DOM. Encapsulate your code in $(function(){/* DOM queries here */})
  
  so that it only runs when the DOM is ready.
• There is a syntax error in your code: there is an extra closing parenthesis on the last line. You can use your browser's console to check your code for syntax errors.

As for your code hiding your code, you are running out of space in your selector since yours .nav-ad

is inside an element .cloned

. It should be:

$(window).scroll(function() {
 if ($(this).scrollTop() > 0) {
    $('.cloned .nav-ad').fadeOut();
 } else {
    $('.cloned .nav-ad').fadeIn();
 }
});

      

        
        
        
      

    

However, let me explain why you should change the code anymore. The way your code is written is very inefficient. To optimize your code, consider the following:

• Always initialize all your variables with var
  
  , let
  
  or const
  
  . Undeclared variables are implied as global variables, which are very error prone and generally bad practice.
• Don't use setInterval () for this operation. It's super ineffective. Use an event handler instead onScroll
  
  .
• Don't let element classes identify them. Instead, store them in a variable. This way you don't have to constantly fire new DOM queries.
• Do not take measurements that remain constant inside an event handler. Instead, measure once and store them in a variable outside the handler.
• Do not click .css()
  
  on the same element several times in succession. Instead, pass the functions to the object with whatever styles you want to apply.

Here's the working code:

$(function() {
  var $window = $(window);
  var $toolbarOriginal = $('.toolbar-container');
  var $toolbarClone = $toolbarOriginal
    .clone()
    .css({
      position: 'fixed',
      top: 0,
      marginTop: 0,
      zIndex: 500,
    }).hide().insertAfter($toolbarOriginal);
  var $adClone = $toolbarClone.find('.nav-ad');

  var orgElementPos = $toolbarOriginal.offset();

  $window.scroll(function(e) {
    $window.scrollTop() >= orgElementPos.top ? attach() : detach();
  });

  function attach() {
    $toolbarOriginal.css('visibility', 'hidden');
    $toolbarClone.show().css({
      left: orgElementPos.left,
      width: $toolbarOriginal.css('width'),
      top: 0,
    });
    $adClone.fadeOut();
  }

  function detach() {
    $toolbarOriginal.css('visibility', 'visible');
    $toolbarClone.hide();
    $adClone.fadeIn();
  }
});

      

        
        
        
      

    

Also, here's a demo .

Also, something to consider: most ad units automatically block elements with classes containing the word "ad".