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>

• Thomas: 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.
• radimpe: "can any one please convert it": What have you tried...? Maybe we can help with any issues you experience...
• sberry: 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.
• DayTimeCoder: 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.
• RaceBase: Hi, I need to learn and I am ok with that. But for my present job I need to do the task.

Answer 1

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.

Answer 2

Off the top of my head, something like this:

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

• Andreas: The name of the event is wrong. It's just scroll - element.addEventListener (MDN)
• RaceBase: 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: 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.

Answer 3

The equivalent JavaScript for getting window's scroll event is

window.onscroll = function()

{

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

}

• Narendra: 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.