jQuery的：当滚动到一定的div

Question

这里插入IMG和改变CSS就是我想做的事：

首先，表明内<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) { 
 
\t e.preventDefault(); 
 
     var scrollAnchor = $(this).attr('href'), 
 
      scrollPoint = $(scrollAnchor).offset().top; 
 

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

 
    $(window).scroll(function() { 
 
\t var windscroll = $(window).scrollTop(); 
 
\t $('#main > div').each(function(i) { 
 
\t  if ($(this).offset().top <= windscroll) { 
 
\t \t $('.side_list').find('a.active').removeClass('active').find('img').remove(); 
 
\t \t $('.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">'); 
 
\t  } 
 
\t }); 
 
    }).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; 
} 

JSFIDDLE

的类添加到系统默认的第一图像标签可见。