在滾動條上更改圖像徽標

Question

我試圖在滾動到某個點後進行圖像更改。我嘗試了以下內容，但在滾動時會發生變化。

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!'); 
    } 
}); 
}); 

我嘗試添加以下代碼爲它知道何時圖像之間進行切換，但未能

var wn = $(window).scrollTop(); 
    if(wn > 700){ 

Answer 1

$(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!'); 
 
     } 
 
    }) 
 
});

<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" > \t \t \t \t \t \t \t \t 
 
\t \t <li> <a href="#" title="I'm Serious"> Nothing to see here</a> </li> 
 
\t </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>

這應該做的伎倆。如果需要改回去做同樣的功能，但是切換邏輯...

編輯

所以這是第一個條件：

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!'); 
} 

我改變了兩件事：

1. 在鏈接
2. >個數爲<

所以，現在的邏輯是：如果滾動小於1000像素使用小的圖片，如果超過1000像素使用大圖像。