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;
Comments
Post a Comment