Cambio de imagen del logotipo de desplazamiento

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

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:

el número en el enlace
> 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?

InformationsquelleAutor hansTheFranz

    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");
}
})
})

InformationsquelleAutor Anoop Seth

-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.
InformationsquelleAutor Anoop Seth

3 Comentarios

Dejar respuesta Cancelar respuesta