Estoy tratando de hacer un cambio de imagen una vez que se desplaza a un punto determinado. He intentado lo siguiente, pero cambia a la derecha cuando usted se desplaza.

    jQuery(function($) {
 $(window).scroll(function() {
   if($('.navbar').hasClass('navbar-brand')) {
     $('.navbar .navbar-brand img').attr('src','http://placehold.it/120?text=Original+Logo!');
   }else{
     $('.navbar .navbar-brand img').attr('src','http://placehold.it/120?text=Original+Logo!');
   }
 });
});

He intentado añadir el siguiente código para saber cuándo cambiar entre las imágenes, pero no

    var wn = $(window).scrollTop();
    if(wn > 700){
InformationsquelleAutor Emanuel | 2017-07-14

3 Comentarios

  1. 7

    JS:

    $(function () { 
        $(window).scroll(function () {
            if ($(this).scrollTop() > 1000) { 
                $('.navbar .navbar-brand img').attr('src','http://placehold.it/220?text=Original+Logo!');
            }
            if ($(this).scrollTop() < 1000) { 
                $('.navbar .navbar-brand img').attr('src','http://placehold.it/120?text=Original+Logo!');
            }
        })
    });

    HTML:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <nav class="navbar navbar-default navbar-fixed-top" >  
    <a class="navbar-brand first" data-toggle="modal" data-target="#myModal">Start </a>
    <a class="navbar navbar-brand first" data-toggle="modal" data-target="#myModal"><img src='http://placehold.it/120?text=Original+Logo!'></a>
    <a class="dropdown-toggle btn btn-primary btn-md btn-example dropdown-hover-toggle" data-toggle="dropdown"
    >
    </a>
    <ul class="dropdown-content dropdown-menu dropdown-menu-right" role="menu" >								
    <li> <a href="#" title="I'm Serious"> Nothing to see here</a> </li>
    </ul>
    </nav>
    <div class="bbb aaa">
    </div>
    <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog" style="width:1500px;">
    <!-- Modal content-->
    <div class="modal-content">
    <div class="modal-header" style="background-color: #003399;">
    <button type="button" class="close" data-dismiss="modal" style="color: 
    #fff;">&times;</button>
    <h4 class="modal-title" style="color: #fff;">Upload New File</h4>
    </div>
    <div class="modal-body">
    <form class="form-horizontal" action="uploadfile.php" method="post" 
    name="addservice" enctype="multipart/form-data" align="center" 
    onsubmit="return validateForm()"> 
    <label for="filename" class="col-sm-2 control-label">File Name:
    </label>
    <div class="col-sm-4"><input type="text" class="form-control" 
    name="filename" id="filename" placeholder="Name of the file" 
    maxlength="55" tabindex="1" required></div>
    <label for="file" class="col-sm-2">File:</label>
    <div class="col-sm-4"><input type="file" maxlength="11" 
    name="file" id="file" class="form-control" tabindex="2" 
    required></div>
    <label for="filedesc" class="col-sm-2">File Description:</label>
    <div class="col-sm-4"><textarea class="form-control" rows="3" 
    name=" filedesc" id="filedesc" placeholder="(maximum of 75 
    characters)" style="resize: none;" maxlength="75" tabindex="3" 
    required></textarea></div>
    <div class="col-sm-4">
    <div class="form-group"><input class="btn btn-success btn-lg col-
    sm-4" name="submit" type="submit" value="Upload" tabindex="4">
    <input type="reset" class="btn btn-default btn-lg col-sm-4" 
    name="clear" value="Clear" tabindex="5">
    </div>
    </div>
    </form>
    <div>
    </div>
    </div> <!-- modal body -->
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-
    dismiss="modal">Close</button>
    </div>
    </div>  <!-- modal content -->
    </div> <!-- modal dialog -->
    </div> 
    <h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br>
    <h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br><h1> sdafsafsdfadsfasdsafdfasdfsadfsadfasd</h1><br>

    Que debe hacer el truco. Si usted necesita para cambiar de nuevo de hacer la misma función, pero la lógica del interruptor…

    EDITAR

    Así que esta fue la primera condición:

    if ($(this).scrollTop() > 1000) { 
    $('.navbar .navbar-brand img').attr('src','http://placehold.it/220?text=Original+Logo!');
    }

    Y ahora he añadido la segunda condición:

    if ($(this).scrollTop() < 1000) { 
    $('.navbar .navbar-brand img').attr('src','http://placehold.it/120?text=Original+Logo!');
    }

    He cambiado dos cosas:

    1. el número en el enlace
    2. > se convirtió en <

    Así que ahora la lógica es: si se desplaza a menos de 1000px el uso de la imagen pequeña, y si más de 1000px el uso de la imagen grande.

    • href=»https://codepen.io/hansfranz/pen/gRQKEy?editors=1010″ >codepen.io/hansfranz/pen/gRQKEy?los editores=1010 busque en este codepen. Después de 1000px se envía una alerta. En lugar de la alerta que necesita para implementar su lógica. ¿Cómo funciona el encabezado de aspecto
    • El codepen funciona el cambio de la imagen después de 1000px, pero me gustaría volver a cambiar a la normal logotipo de si el usuario se desplaza de nuevo hacia arriba por encima de la 1000px.
    • Que trabajó muchas gracias! He jugado con él ahora y que también trabaja con una instrucción else.
    • Yo estaba usando esta técnica y pensé que estaba todo bien, pero cuando me vino a la cruz de prueba del navegador me encontré con que si parpadea de ida y vuelta en chrome. Incluso traté de hacer que los límites superior e inferior diferente, pero todavía lo hace. Alguna idea?
  2. 1
        HTML
    ----------------------------------------
    <script
    src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
    crossorigin="anonymous"></script>
    <nav class="navbar navbar-expand-lg navbar-light bg-light cn-stick-nav">
    <div class="container">
    <a class="navbar-brand" href="index.html"><img src="images/logo/logo.png"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown2" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="cn-toggle"><i class="fas fa-bars"></i></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown2">
    <ul class="navbar-nav mr-auto">
    <!--extra menu space-->
    </ul>
    <ul class="navbar-nav">
    <li class="nav-item active">
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">New Arrived</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="blog.html">Blog</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Portfolio</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">About Us</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="contact-us.html">Contact Us</a>
    </li>
    </ul>
    </div>
    </div>
    </nav>
    ---------------------------------
    JAVA Script
    ---------------------------------
    $(window).scroll(function(){
    if($(this).scrollTop()>5){
    $(".cn-stick-nav").addClass("fixed-top navbar-dark bg-dark nav-bdr");
    }
    else{
    $(".cn-stick-nav").removeClass("fixed-top navbar-dark bg-dark nav-bdr");
    }
    })
    //
    $(function(){
    $(window).scroll(function(){
    if($(this).scrollTop()>5){
    $(".navbar .navbar-brand img").attr("src","images/logo/logo-white.png");
    }
    else{
    $(".navbar .navbar-brand img").attr("src","images/logo/logo.png");
    }
    })
    })
  3. -3

    Total explicada Con Tutorial
    https://www.youtube.com/watch?v=52RLKmctp7U
    [Cómo Hacer Sticky barra de exploración Y cambio de logo de desplazamiento | GyanNiti]

    • El código Está aquí—- —————————– $(de la ventana).scroll(function(){ if($(this).scrollTop()>5){ $(«.cn-palo-nav»).addClass(«fijo superior de la barra de navegación de la oscuridad, los bg-oscuro nav-bdr»); } else{ $(«.cn-palo-nav»).removeClass(«fijo superior de la barra de navegación de la oscuridad, los bg-oscuro nav-bdr»); } }) // $(function(){ $(window).scroll(function(){ if($(this).scrollTop()>5){ $(«.barra de navegación .barra de navegación de la marca img»).attr(«src»,»images/logo/logotipo-blanco.png»); } else{ $(«.barra de navegación .barra de navegación de la marca img»).attr(«src»,»images/logo/logotipo.png»); } }) })
    • Por favor editar el código correspondiente a su respuesta, no un comentario.

Dejar respuesta

Please enter your comment!
Please enter your name here