Converting Jquery to Javascript

Question

Sorry, I am am very poor at JQuery.

I got one code for my requirement which is Jquery. Can any one please convert it into plain javascript

$(window).scroll(function() {
    var scrollTop = $(window).scrollTop();
$("#mybox").css("top", scrollTop + "px");
});

css part

#mybox
{
    position:absolute;
    width:200px;
    height:50px;
    background-color:red;
}

I am using it display a floating link at the bottom of the page even if user navigated through the page

<script type="text/javascript">
window.addEventListener('scroll', function() {
    var scrollTop = window.pageYOffset;
    document.getElementById('worklist').style.top = scrollTop;
});
</script>
<div id="worklist" style="position: absolute; bottom: 5px; right: 50px;">
 <a href="LinkHere"><h2>Work List</h2></a>
</div>

Why would you want to do this? I'd sugest you take some time to learn jQuery. I'm sure you'll find out it's easier and faster to use then regular javascripts for most tasks. — Thomas
– Thomas, Commented Jul 6, 2012 at 6:25
"can any one please convert it": What have you tried...? Maybe we can help with any issues you experience... — radimpe
– radimpe, Commented Jul 6, 2012 at 6:27
Well, jquery is open source, and it is plain javascript, so why not start by looking at the source for some of the functions mentioned and see what you can come up with. Then come back here with sample code and maybe we can help you finish it off. — sberry
– sberry, Commented Jul 6, 2012 at 6:27
Hello Nitin Gurram, I urge you that you start using JQuery as it has many benfits, 1. Cross-Browser Support, 2. Powerfull filtration, 3. Reduced code size. — DayTimeCoder
– DayTimeCoder, Commented Jul 6, 2012 at 6:53
Hi, I need to learn and I am ok with that. But for my present job I need to do the task. — RaceBase
– RaceBase, Commented Jul 6, 2012 at 9:34

Andy · Accepted Answer · 2012-07-06 12:23:48Z

2

I'm guessing that maybe this is what you want:

http://jsfiddle.net/fuJbh/

window.addEventListener('scroll', function() {
    var scrollTop = window.pageYOffset;
    document.getElementById('worklist').style.bottom = -scrollTop + "px";
});

This will keep your link at the bottom of the page.

Hope this helps!

Andy.

answered Jul 6, 2012 at 12:23

Andy

3,0052 gold badges42 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mzgajner · Accepted Answer · 2012-07-06 06:56:32Z

1

Off the top of my head, something like this:

window.addEventListener('scroll', function() {
    var scrollTop = window.pageYOffset;
    document.getElementById('mybox').style.top = scrollTop;
});

edited Jul 6, 2012 at 6:56

answered Jul 6, 2012 at 6:36

mzgajner

2,3481 gold badge17 silver badges14 bronze badges

3 Comments

Andreas Over a year ago

The name of the event is wrong. It's just scroll - element.addEventListener (MDN)

RaceBase Over a year ago

I am using to keep a link floating at bottom of the page while scrolling the page up/down/navigating. but this JS is not wokring :(

mzgajner Over a year ago

In that case, I think you shouldn't be using JavaScript at all. The way people usually make fixed elements is with CSS position:fixed property. Read this.

Narendra · Accepted Answer · 2012-07-06 06:59:36Z

0

The equivalent JavaScript for getting window's scroll event is

window.onscroll = function()

{

// Here write what you want to do when you scroll.

}

answered Jul 6, 2012 at 6:59

Narendra

3,1157 gold badges33 silver badges51 bronze badges

1 Comment

Narendra Over a year ago

But I suggest learn jQuery, it will make your JavaScript coding easy and fast. You can start from here w3schools.com/jquery/default.asp It will take max 2-3 hrs to learn basics of jQuery.

Collectives™ on Stack Overflow

Converting Jquery to Javascript

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related