CODEWITHSUNDEEP
javascriptjquerycss
MikeSeen
MikeSeen

Reputation: 5

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

I'm looking to incrementally move/slide a small arrow shaped element from left to right as the user scrolls up and down the page.

For example if i scroll down 20px the arrow moves to the right 5px and if i scroll up 40px the arrow moves to the left 10px

My site navigation will also use smooth scroll page jumps, so the arrow needs to respond and position itself to the navigated menu heading(such as a default pixel location for each nav link).

Can anyone provide direction and best coding for 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;
}

Upvotes: 0

Views: 1430

Answers (1)

omma2289
omma2289

Reputation: 54639

This is basically all the jQuery code you need

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

Bind to the window scroll event and change the position of the arrow accordingly

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

Demo fiddle

Upvotes: 1

Related Questions