Change logo when scrolling

Question

Change logo when scrolling

Navigation

#1 by (1 votes)
#2 by (0 votes)

4

I am currently doing a web and the CMS e-commerce with which I am handling the content is Prestashop but I have run into the following problem:

We have a menu: X 1 2 3 4 , where X is the logo and the numbers are sections of the menu.

At the time of scrolling, I would like to change that logo and also when going to the top of the page that returns to the first logo.

I've been searching the web, how to add code to Prestashop , but I do not recognize it or my code is wrong, or both. I tried exploring the JavaScript that manages this property and I came up with this idea:

Menu: X 1 2 3 4 static, and when downloading hide the class that I have of the logo and show a background image, which would be the logo that I want to show when I scroll, but when using the method removeClass nothing happens.

javascript jquery prestashop

asked by Juan C 16.02.2017 в 05:10

source

2 answers

0

Try manipulating this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
jQuery(document).ready(function(){
  jQuery(document).scroll(function(event){
        var position = jQuery(document).scrollTop();
        if(position>150){
           jQuery("#img o .img").replaceWith("<img id='remplazo_nueva_imagen' src='nueva_imagen.jpg' class='clase'>");//id, o clase de tu imagen # =id . = class          
        }else{
          jQuery("#remplazo_nueva_imagen").replaceWith("<img src='' class=''>");  
        }
  });
});
/*
Este codigo lo que hace es detectar el scroll de la pagina en tu caso puedes jugar con los valores y meter el cambio tantas veces que desees, recuerda que para cambiar una imagen en el scroll debes meterle un id, luego para volverla a cambiar usar el mismo id o clase que le pasaste al replaceWith */
/*
OPCION 2*/
/*METER 4 IMAGENES EN UNA MISMA POSICION Y TENERLAS OCULTAS*/

jQuery(document).ready(function(){
  jQuery("#img2").hide();
  jQuery("#img3").hide();
  jQuery("#img4").hide();
  jQuery(document).scroll(function(event){
        var position = jQuery(document).scrollTop();
        if(position>50){ 
          jQuery("#img_padre").hide();
          jQuery("#img2").fadeIn(1000);
                if(position>150){ 
                jQuery("#img2").hide();
                jQuery("#img3").fadeIn(1000);
            }
           if(position>250){ 
                jQuery("#img3").hide();
                jQuery("#img4").fadeIn(1000);
            }
        }else{
          jQuery("#img4").hide();
          jQuery("#img_padre").show();
        }
  });
});
/*Detecta cada posicion y va ocultando las imagenes y mostrando otras*/
/*Juega con los valores*/

answered by 16.02.2017 в 05:58

Save cmd command result executed from java in a variable Access Violation Error while trying to consume a SOAP Web Service from a 64-Bit IOS

score 1 · Accepted Answer

In the following link there is an example with what you describe:

link

This would be the example code:

// esta parte, permite que se ejecute el codigo cuando se halla cargado la pagina
$(function() {
  // esta parte es la que controla cuando se mueve el scroll y ejecuta una función
  $(document).scroll(function() {
    // aca se pregunta si el scroll se movio de pa bajo.
    if ($(this).scrollTop() > 1) {
      // esta parte cambia el atributo "src" de la etiqueta "img" 
      $('#logo').attr('src', 'http://wowslider.com/images/data/images/slide1.png')
    }
    if ($(this).scrollTop() < 1) {
      $('#logo').attr('src', 'https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png');
    }
  });
});

#menu {
  list-style: none;
  overflow: auto;
}

#menu li {
  display: inline;
}

#logo {
  float: left;
}

#contenedorMenu {
  position: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contenedorMenu">
  <img id="logo" src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" width="184" height="60" />
  <ul id="menu">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>
<p style="height:1000px;"></p>