Есть скрипт для скроллинга к якорю. Как сделать смену изображения, которое ведет к якорю, на который кликнул юзер ?
Например, я нажимаю на ссылку #settings
, попадаю на <div id="settings"></div>
и иконка меняет src.
Иконка - изображения: <img src="images/[files|note|settings|pass|blog|info].png">
Нужен эффект как здесь (слева в сайдбаре ссылки меняют цвет в зависимости от якоря)
Html:
<div class="leftb" style=" position: fixed; text-align:center;
top: 0;
left: 0;
width: 5%; padding-top:15%;
height: 100%; background: black;"><a href="#files"><img src="http://kottsov.ru/images/files.png"></a><br>
<a href="#note"><img src="http://kottsov.ru/images/note.png" style="margin-top:10px"></a><br>
<a href="#settings"><img src="http://kottsov.ru/images/settings.png" style="margin-top:10px"></a><br>
<a href="#pass"><img src="http://kottsov.ru/images/pass.png" style="margin-top:10px"></a><br>
<a href="#blog"><img src="http://kottsov.ru/images/blog.png" style="margin-top:10px"></a><br>
<a href="#info"><img src="http://kottsov.ru/images/info.png" style="margin-top:10px"></a>
</div>
<section id="files" style="background:red"></section>
<section id="note" style="background:yellow"></section>
<section id="settings" style="background:green"></section>
<section id="pass" style="background:orange"></section>
<section id="blog" style="background:black"></section>
<section id="info" style="background:white"></section>
Js:
$(document).ready(function(){
$(".leftb").on("click","a", function (event) {
event.preventDefault();
var id = $(this).attr('href'),
top = $(id).offset().top;
$('body,html').animate({scrollTop: top-55}, 500);
});
});
jQuery(window).scroll(function(){
var $sections = $('section');
$sections.each(function(i,el){
var top = $(el).offset().top-100;
var bottom = top +$(el).height();
var scroll = $(window).scrollTop();
var id = $(el).attr('id');
if( scroll > top && scroll < bottom){
// менять изображение, класс которого соответствует якорю
}
})
});