0

Quiero hacer un menú que cambie el nombre dependiendo en la sección en la que se encuentre, este debe estar fixed todo el tiempo, la página la desarrolle con viewScroller.js y hasta el momento no he logrado conseguirlo:

http://www.viewdesic.com/viewscroller/ <--Es la misma estructura que este

en tanto al menu lo tengo así

                <div id="side">
                <div class="icMenu">
                    <div class="hamburger">
                        <div class="hamburger-inner"></div>
                    </div> 
                </div>
                <h3 class="tituloSection" id="tittle">Home</h3> 
            </div>
            <div id="sidePrev">
                <a><img src="imagenes/web-mano-santa-arrow-right.png" width="50%" class="indicadorNext vs-mainview-next"></a>
            </div>
            <div id="sideNex">
                <a><img src="imagenes/web-mano-santa-arrow-left.png" width="50%" class="indicadorNext vs-mainview-prev"></a>
            </div>
            <div id="sideFoot">
                <i class="fa fa-instagram fa-lg whiteIcons" ></i><br><br><br>
                <i class="fa fa-facebook fa-lg whiteIcons" ></i>
            </div>
            <div id="menuBarra">
            </div>

Lo que debe cambiar es lo que dice "home"

11
  • tienes algún ejemplo de lo que has desarrollado?? Puedes crear un snippet verificable, para que todos podamos añadir lo que te haga falta?¿ el 20 sep. 2018 a las 15:34
  • codepen.io/Erik_W/pen/JaxZyV <-- Aquí está, ojalá me puedas ayudar el 20 sep. 2018 a las 16:07
  • Uf!!! no se ve nada bien!!! has mirado lo que sale?? sale un boton enorm y todo un poco desorganizado!!! el 20 sep. 2018 a las 16:10
  • Lo que puedo decirte, es que el contenido se cambiaria con $("#tittle")[0].innerHTML("LoQueTuQuieras"); el 20 sep. 2018 a las 16:12
  • codepen.io/Erik_W/full/JaxZyV Revisa la carga en full page, solo no aparecen las imagenes, de las secciones, el menu que comentaba si sale el 20 sep. 2018 a las 16:13

1 respuesta 1

0

En primer lugar, debes chequear el evento onScroll

Al hacer el onScroll, debes chequear que cada uno de las secciones, sea visible

$(".mainview").forEach(function (obj, index){
   //Aqui chequea si es visible. 
   // Y si es visible actualizas el boton
});

En función de lo que consideres que hace visible a cada sección (ahí supongo que tendrás que mirar bien para que se comporte como esperas).

Podrás cambiar el valor con la siguiente orden:

$("#tittle")[0].innerHTML("LoQueTuQuieras");

Recuerda que en el foreach, puedes acceder a cada obj que localizas, por lo que puedes saber su nombre directamente, y aplicar ese nombre al tittle

3
  • He tratado de hacerte un resumen, no te comprendía, disculpame. A ver si con eso te puede valer. He puesto en el foreach el .mainview ya que es la clase que identifica a las secciones el 20 sep. 2018 a las 16:30
  • Perfecto, lo checo y te digo que pasa GRACIAS! el 20 sep. 2018 a las 16:33
  • si... siento no poder ponerte más, pero no tengo tiempo de programarlo todo, necesitaría un rato para dejarlo bien. Espero que al menos te guíe, o que alguien mejore mi respuesta / añada la suya y avancemos!! el 20 sep. 2018 a las 16:34

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.