jQuery:插入 img 并在滚动到某个 div 时更改 CSS

Question

这就是我想做的：

首先，在<div class="side_list">内<a>标签的左侧显示按钮图像，并更改<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>

Answer 2

var THRESHOLD = 920;
$(document).ready(function() {
  $('body,html').bind('scroll wheel DOMMouseScroll', function(event) {
    var scrollTop = $(window).scrollTop();
    var value = scrollTop / THRESHOLD;
    $(".side_list").removeClass('highlight');
    $(".side_list img").removeClass('visible');
    $(".side_list").eq(parseInt(value)).addClass('highlight').find('img').addClass('visible');
  });
});

.CSS

    .highlight {
      background: grey;
    }
.side_list img {
  display: none;
}
.visible {
  display: block!important;
}

吉斯菲德尔

默认情况下，可见类将添加到第一个图像标记中。