javascript - Make a tiny arrow move left to right as user scrolls up and down page -


i'm looking incrementally move/slide small arrow shaped element left right user scrolls , down page.

for example if scroll down 20px arrow moves right 5px , if scroll 40px arrow moves left 10px

my site navigation use smooth scroll page jumps, arrow needs respond , position navigated menu heading(such default pixel location each nav link).

can provide direction , best coding this?

thanks

.arrow { enter code here  width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 5px solid #7ac943; position:relative; margin-top: -5px; margin-left: 41px; position: fixed; }  .arrow:after { content:''; position:absolute; top:2px; left:-5px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 4px solid black; } 

this jquery code need

$(window).scroll(function(){     $('.arrow').css('margin-left',$(this).scrolltop() / 4 + 'px'); }); 

bind window scroll event , change position of arrow accordingly

to make arrow visible you'd need use position:fixed;

demo fiddle


Comments

Popular posts from this blog

plot - Remove Objects from Legend When You Have Also Used Fit, Matlab -

java - Why does my date parsing return a weird date? -

Need help in packaging app using TideSDK on Windows -