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

＆＃13;

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

＆＃13;

<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>

＆＃13;

这应该可以解决问题。如果您需要更改它，请使用相同的功能但切换逻辑......

修改

所以这是第一个条件：

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

我改变了两件事：

链接中的数字
>成为<

所以现在逻辑是：如果滚动小于1000px使用小图像，如果超过1000px使用大图像。

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>

<select id="example" multiple="multiple" style="width: 300px">
    <option value="-1">Select later</option>
    <option value="JAN">January</option>
    <option value="FEB">February</option>
    <option value="MAR">March</option>
    <option value="APR">April</option>
    <option value="MAY">May</option>
    <option value="JUN">June</option>
    <option value="JUL">July</option>
    <option value="AUG">August</option>
    <option value="SEP">September</option>
    <option value="OCT">October</option>
    <option value="NOV">November</option>
    <option value="DEC">December</option>
</select>

<script>
var $example = $('#example');
$example.select2();
$example.on("change", function() {
  var vals = $(this).val();
  if (vals.length > 1 && vals.includes("-1")) {
    $(this).val("-1");
    $(this).trigger('change');
  }
})
</script>

Answer 3

总计（含教程） https://www.youtube.com/watch?v=52RLKmctp7U [如何制作粘性导航栏并更改滚动条上的徽标| GyanNiti]

更改滚动图像徽标

3 个答案: