Question

js fiddle: https://jsfiddle.net/zxa4h7au/

What I am trying to achieve:

Using jQuery, I would like the dot along the line to move up and down to the point of the paragraph that the user has scrolled on. so for example, the starting point would be "PARAGRAPH" then if I move down to "ANOTHER PARAGRAPH" the dot would then move down to that page.

I have tried to use scroll and animate but this does not work:

 $(document).scrollDown(function(e) {

    $("#badge").animate({
        'marginTop' : "+=4000"
        });

});

Could anyone please tell me where I am going wrong here? Or if there is another way to achieve what I am trying to do.

Answer 1

Maybe I've don't understand. You just need that you blue dot scroll down and scroll up with you page flow, right?

You can achieve this thing in two ways:

1 - CSS solution: just give to the badge this property "position: fixed" and than position it in the right place(centered on the line and with a top value like 0 or 10px;

2 - jQuery solution: check this fiddle https://jsfiddle.net/zxa4h7au/1/

$(window).scroll(function(e) {
    var scrollTop = $(window).scrollTop();
    $("#badge").css({
        'marginTop' : scrollTop
    });
});

Is this what you need or something different?

jQuery on scroll down to specific paragraph

1 个答案: