jQuery:滚动到某个div时插入图像并更改CSS

Question

这是我想做的:

首先，显示<a>左边的按钮图片在 <div class="side_list"> 内标记并更改 <p> 的颜色标记以指示用户所在的位置，如果我老老实实地将它写在 html 上，就像这样(但它必须是列表中三个条目中的第一个):

<div class="side_list">
 <img src="images/btn.png" width="20px" height="20px" alt="selected" style="padding-top: 15px; padding-left: 9px;">
 <a href="#contentA"><p style="color: #53b6da;">Content A</p></a>
</div>

其他都是这样，没有指定按钮图片和字体颜色:

<div class="side_list">
 <a href="#contentB"><p>Content B</p></a>
</div>
<div class="side_list">
 <a href="#contentC"><p>Content C</p></a>
</div>

然后，如果浏览器滚动到下一个 div (#contentB)，我想用插入的按钮图像和指定的字体颜色突出显示列表中的相应条目。同时，我想关闭#contentA 的高亮显示，因为我们已经不在了。当向下滚动更深时，我想对 #contentC 执行相同的操作。

我应该如何使用 jquery 执行此操作？

HTML

<div id="body">
 <div id="side">
  <div class="side_list">
   <a href="#contentA"><p>Content A</p></a>
  </div>
  <div class="side_list">
   <a href="#contentB"><p>Content B</p></a>
  </div>
  <div class="side_list">
   <a href="#contentC"><p>Content C</p></a>
  </div>
 </div>

 <div id="main">
  <div id="contentA"></div>
  <div id="contentB"></div>
  <div id="contentC"></div>
 </div>
</div>

CSS

#body {
    width: 950px;
    height: 3000px;
    margin: 0 auto;
  }

 #side {
    width: 150px;
    height: 150px;
    position: fixed;
    background-color: #ffffff;
  }

 .side_list {
    border-bottom: 1px solid #e6e6e6;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }

 .side_list a {
    text-decoration: none;
    color: #000000;
  }

 .side_list a p {
    padding-left: 10px;
  }

  #main {
    width: 950px;
    height: 3000px;
  }

  #contentA {
    width: 950px;
    height: 1000px;
    background-color: #07CB6F;
  }

  #contentB {
    width: 950px;
    height: 1000px;
    background-color: #2FA3F7;
  }

  #contentC {
    width: 950px;
    height: 1000px;
    background-color: #FF00AB;
  }

提前致谢:)

Answer 1

你可以这样做:

$(document).ready(function() {

    $('.side_list').first().find('a').addClass('active').append('<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAb0lEQVRoge3SwQ2AIBQE0SmB/puwBO1AOtKLxgLE/MXMS/ZKGAJIkiRJoRZgBVr1Rd7qwAHsTB7TMCaTMamMSWVMqk9i9uvAyg2JuV+mcn1ESIXG8xOMqGRECiNSGJHiFxHwkwiA7drUEZIkSZrMCfhPfOX9rM7NAAAAAElFTkSuQmCC" width="20" height="20">');
  
    $('.side_list a').on('click', function(e) {
	e.preventDefault();
        var scrollAnchor = $(this).attr('href'),
            scrollPoint = $(scrollAnchor).offset().top;

   	$('body,html').animate({
   	    scrollTop: scrollPoint
   	}, 500);
    });

   $(window).scroll(function() {
	var windscroll = $(window).scrollTop();
	$('#main > div').each(function(i) {
	    if ($(this).offset().top <= windscroll) {
		$('.side_list').find('a.active').removeClass('active').find('img').remove();
		$('.side_list').children('a').eq(i).addClass('active').append('<img class="icon icons8-Right" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAb0lEQVRoge3SwQ2AIBQE0SmB/puwBO1AOtKLxgLE/MXMS/ZKGAJIkiRJoRZgBVr1Rd7qwAHsTB7TMCaTMamMSWVMqk9i9uvAyg2JuV+mcn1ESIXG8xOMqGRECiNSGJHiFxHwkwiA7drUEZIkSZrMCfhPfOX9rM7NAAAAAElFTkSuQmCC" width="20" height="20">');
	    }
	});
   }).scroll();
  
});

#body {
    width: 950px;
    height: 3000px;
    margin: 0 auto;
  }

 #side {
    width: 150px;
    height: 150px;
    position: fixed;
    background-color: #ffffff;
  }

 .side_list {
    border-bottom: 1px solid #e6e6e6;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    position: relative;
  }

 .side_list a {
    text-decoration: none;
    color: #000000;
  }

 .side_list img {
   position: absolute;
   top: 0;
   left: 10px;
 }
 
 .side_list a p {
    padding-left: 50px;
  }

 .side_list a.active p {
    color: red;
  }
  
  #main {
    width: 950px;
    height: 3000px;
  }

  #contentA {
    width: 950px;
    height: 1000px;
    background-color: #07CB6F;
  }

  #contentB {
    width: 950px;
    height: 1000px;
    background-color: #2FA3F7;
  }

  #contentC {
    width: 950px;
    height: 1000px;
    background-color: #FF00AB;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="body">
  <div id="side">
    <div class="side_list">
       <a href="#contentA"><p>Content A</p></a>
    </div>
    <div class="side_list">
      <a href="#contentB"><p>Content B</p></a>
    </div>
    <div class="side_list">
     <a href="#contentC"><p>Content C</p></a>
    </div>
  </div>

 <div id="main">
  <div id="contentA"></div>
  <div id="contentB"></div>
  <div id="contentC"></div>
 </div>
</div>