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

你可以这样做：

＆＃13;

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

＆＃13;

#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;
  }

＆＃13;

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

＆＃13;

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

JSFIDDLE

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

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

2 个答案: