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?¿ Commented el 20 sept. 2018 a las 15:34
  • codepen.io/Erik_W/pen/JaxZyV <-- Aquí está, ojalá me puedas ayudar Commented el 20 sept. 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!!! Commented el 20 sept. 2018 a las 16:10
  • Lo que puedo decirte, es que el contenido se cambiaria con $("#tittle")[0].innerHTML("LoQueTuQuieras"); Commented el 20 sept. 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 Commented el 20 sept. 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 Commented el 20 sept. 2018 a las 16:30
  • Perfecto, lo checo y te digo que pasa GRACIAS! Commented el 20 sept. 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!! Commented el 20 sept. 2018 a las 16:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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