Javascript: Vertical Spacing between two elements

Question

My website consists of a navigation bar (class .nav-primary), a widget box (id #mw-panel) and an article. Recently, I tried to move the widget box up to the top, by applying the following changes to my CSS file:

.mw-panel{top: 50px;}

The problem with this option was, that my element was fixed to a specific position. Instead I wanted the widget element to be exactly 100px under the menu bar (and moving when I am scrolling down the page). Instantly, I knew that JavaScript would be the correct way to solve this problem.

Because I had no success, I asked the StackOverflow community, which helped me a lot.

The JavaScript code in the JS section of the attached code snippet, was partially done by me, but it does not work as it should.

Can someone explain me what I need to change to get this JS code working? Again, #mw-panel has to be positioned exactly 100px beneath .nav-primary.

var menu = document.getElementsByClassName("nav-primary")[0];
var widget = document.getElementById("mw-panel");
var difference = widget.offsetTop - menu.offsetBottom;
if (difference > 100) {
document.getElementById("mw-panel").style.top = (menu.offsetBottom + 100) + "px";
}

.content .entry {
    margin-top: 40px;
  padding-bottom: 400px;
}

<body class="full-width-content">

  <link rel="stylesheet" id="child-theme-css" href="http://vocaloid.de/wp-content/themes/Vuturize/style.css" type="text/css" >
  <div class="site-container">
    <nav class="nav-primary">
      <div class="wrap">
        <ul class="menu genesis-nav-menu menu-primary">
          <li class="menu-item"><a href="#">Home</a>
          </li>
          <li class="menu-item"><a href="#">News</a>
          </li>
          <li class="menu-item"><a href="#">Ranking</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>

  <div class="site-inner">
    <div class="content-sidebar-wrap">
      <main class="content">
        <article class="page entry">
<div>
          <h1>Test Article</h1>
          </div>
        </article>
      </main>
    </div>
  </div>
  <div id="mw-panel">
    <div>
      <h3>Navigation</h3>
      <div>
        <ul>
          <li><a href="#">Letzte Änderungen</a>
          </li>
        </ul>
      </div>
    </div>

      <h3>Werkzeuge</h3>
      <div>
        <ul>
          <li><a href="#">Datei hochladen</a>
          </li>
          <li><a href="#">Spezialseiten</a>
          </li>
        </ul>
      </div>
  </div>
</body>

Or place script as described in [document ready equivalent](http://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery) — Artem, Jan 04 '16 at 23:22
@AlexL I guess this is not causing the problem. I added the JS code in the right section of the stackoverflow code editor, so it should be automatically positioned at the end by default. When watching the running code snippet in full view, you can see it is not moved to the top.. — Otaku Kyon, Jan 04 '16 at 23:25
@OtakuKyon Chrome doesn't report any errors when I run your snippet though, can you verify the error is gone? — Alex L, Jan 04 '16 at 23:28
@AlexL After moving the code to the end of
tag fixed the DOM error, but the script is still not working — Otaku Kyon, Jan 04 '16 at 23:31
@AlexL Removed it, checked the updated website, and no sucess — Otaku Kyon, Jan 04 '16 at 23:39
why not re-arrange your html and put the #mw-panel 50px below your menubar ......also do you want your menubar AND mw-panel box to move together when you scroll? — repzero, Jan 05 '16 at 00:49

score 0 · Answer 1 · edited May 23 '17 at 12:15

0

After re-reading your question, I missed one key detail: you're trying to do this JavaScript. This is your problem.

If I understand correctly, you have three items: a nav, an article, and a widget box. You want the widget box to stand 100px below the nav, and then move with the page when you scroll.

if this is the case (if not, correct me), then there's only a few things you need to do:

Keep your nav the way it is. Good job here.
I'm assuming you want the widget next to the article (on the left?). So you'll need to make two columns (some sort of containers, each height: 100%). Your widget container will have the property position: fixed; and the article will have position: static; (or relative, you decide).
Each container will have a width, you might choose 30% for the widget container and 70% for the article, for example.
Now you have two columns, one will move with the page as you scroll.

Here are some links to get you started:

Best Way to do Columns in HTML/CSS

https://css-tricks.com/guide-responsive-friendly-css-columns/

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

edited May 23 '17 at 12:15

Community

1
1

answered Jan 05 '16 at 00:34

Alex L

352
5
13

Probably my issue explanation was a bit misleading. When writing about 'moving when scrolling the page' I was refering to the css code I posted above. '.mw-panel{top: 50px;}' >fixes< the position of the widget. It will always have a distance of 50px from the top of the browser to the widget. But this is not what I want. Instead I want to make it scrollable. When I scroll down the page, the navigation moves upwards and the widget has to follow the navigation bar, but has to keep a distance of 100px. – Otaku Kyon Jan 05 '16 at 02:12
Summarized: The problem is caused by the JavaScript code, which is not working as it should. – Otaku Kyon Jan 05 '16 at 02:15
It would help if you had an example website to model the design off of, I'm still having a hard time figuring out *why* JavaScript is necessary. – Alex L Jan 05 '16 at 02:19

cube · Accepted Answer · 2016-01-05T02:13:04.597

0

There's No such property as offsetBottom. Redo your code ONLY considering offsetTop + offsetHeight to get bottom number.

Example:

var menu = document.getElementsByClassName("nav-primary")
var TrueOffset=menu[0].offsetTop+menu[0].offsetHeight;

You're getting the error because there is no offsetBottom property.

Do console.log(menu) in chrome to see the objects available properties

**Update:

Add this to your css:

.mw-panel{
position: absolute;  
  }

Here it is in action

Updated code in action

edited Jan 05 '16 at 02:13

answered Jan 05 '16 at 00:37

cube

1,714
3
22
31

I opened the updated code and added the CSS file, but it did not seem to work, because the widget box is still on the bottom of the page. – Otaku Kyon Jan 05 '16 at 01:29
You have to add the .mw-panel class to the div... `
` I'll update the code
– cube Jan 05 '16 at 02:11
Updated in jsfiddle, in your final code change the class name so it's not the same as the id.. mw-panel – cube Jan 05 '16 at 02:13

Javascript: Vertical Spacing between two elements

2 Answers2