0

The page has a sticky navbar that stay on screen all the time. When I am scrolling to the next section(div) of the page, it will scroll so the div starts at the top of the screen , so the navigation bar cover it a little bit.

How to minus from y scrolling position the navigation bar height ?

    $('html, body').animate({
    scrollTop: $("#section2").offset().top // minus the nav height
}, 1000);

Also - how to make this navbar height available to my javascript (from the css) using a good practice ? (global var?)

Curnelious
  • 1
  • 16
  • 76
  • 150

2 Answers2

4

You can select your navigation bar (here I gave my navigation bar the id nav) and get its height by doing:

$("#nav").height();

You can then subtract this from the scrollTop property.

However, do note, if your nav bar has padding and/or a margin, to correctly calculate the height you will need to use a different method from .height. See this answer if you're having difficulties.

See working example below:

$('html, body').animate({
  scrollTop: $("#section2").offset().top - $("#nav").height() // minus the nav height
}, 1000);
body {
  margin: 0;
}

nav {
  background: black;
  height: 10vh;
  width: 100%;
  position: fixed;
}

section {
  height: 100vh;
}

#section1 {
  background: red;
}

#section2 {
  background: lime;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="nav"></nav>
<section id="section1">Top</section>
<section id="section2">Top</section>
Nick Parsons
  • 45,728
  • 6
  • 46
  • 64
  • Why is $("nav").attr("height") giving undefined? – Devesh Dec 15 '18 at 11:17
  • 1
    because we haven't set the `height` attribute on the div, instead we have set the *style* of the height of the div, and that can be obtained through `.height()` – Nick Parsons Dec 15 '18 at 11:22
-1

To know the height of any element :

Go to the Inspector (Ctrl+Shift+i), select the 'nav' element and on the right side, click the box-model. This will give you the height and width of the selected element.

In JavaScript, to get the height :

$("nav").height();
Devesh
  • 170
  • 11