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

的類添加到系統默認的第一圖像標籤可見。