Change margin-top with PURE Javascript

Question

I wanted to change margin-top of a div which has margin-top:80px; by default. When people scroll the page down it should change its margin-top:40px . This has to be done in JS. I searched on web about this and all i could get is a tutorial on JQuery. Could any one help me with pure JS. I dont want JQuery or any other framework as it loads all code for this simple one.

Any help will be appreciated.

Thank You.

Possible duplicate of [JavaScript get window X/Y position for scroll](http://stackoverflow.com/questions/3464876/javascript-get-window-x-y-position-for-scroll). — crush, Jul 17 '13 at 14:26
Great question, upvoted, maybe you should accept an answer that is highly-esteemed by the community. — HoldOffHunger, Feb 07 '22 at 15:53

score 12 · Answer 1 · edited Feb 07 '22 at 15:56

12

document.getElementById('YouDiv').style.marginTop='40px';

#YouDiv {
  border:1px solid black;
}

<div>This is other Div</div>
<div id="YouDiv">This is YouDiv</div>

edited Feb 07 '22 at 15:56

HoldOffHunger

18,769
10
104
133

answered Jul 17 '13 at 14:29

score 6 · Answer 2 · answered Jul 17 '13 at 14:28

6

window.onscroll = function() { document.getElementById('id').style.margin = '40px 0 0 0' }

answered Jul 17 '13 at 14:28

Artek Wisniewski

797
5
13

Change margin-top with PURE Javascript

2 Answers2