Ufdjrw

Why does it sometimes sound good to play a grace note as a lead in to a note in a melody?

Putting class ranking in CV, but against dept guidelines

What is "gratricide"?

Generate an RGB colour grid

Is there a kind of relay that only consumes power when switching?

If Windows 7 doesn't support WSL, then what does Linux subsystem option mean?

How to write this math term? with cases it isn't working

Do wooden building fires get hotter than 600°C?

What are the diatonic extended chords of C major?

What does it mean that physics no longer uses mechanical models to describe phenomena?

How to write the following sign?

Can the Great Weapon Master feat's damage bonus and accuracy penalty apply to attacks from the Spiritual Weapon spell?

Converted a Scalar function to a TVF function for parallel execution-Still running in Serial mode

Why wasn't DOSKEY integrated with COMMAND.COM?

Taylor expansion of ln(1-x)

How does the math work when buying airline miles?

How fail-safe is nr as stop bytes?

Denied boarding although I have proper visa and documentation. To whom should I make a complaint?

Is there hard evidence that the grant peer review system performs significantly better than random?

When a candle burns, why does the top of wick glow if bottom of flame is hottest?

Has negative voting ever been officially implemented in elections, or seriously proposed, or even studied?

Why should I vote and accept answers?

How to tell that you are a giant?

Morning, Afternoon, Night Kanji

Cannot read property 'offsetTop' of null (sticky navbar)

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

JS CODE:

window.onscroll = function() myFunction();;

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() 
 if (window.pageYOffset >= sticky) 
 navbar.classList.add("sticky");
 else 
 navbar.classList.remove("sticky");
 

What's wrong with this? I found a w3school example of sticky navigation.
In the console it displays:

Uncaught TypeError: Cannot read property 'offsetTop' of null

javascript html navbar

share|improve this question

edited Mar 8 at 21:45

omikes

3,71682442

asked Mar 8 at 20:45

MarkMark

55

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Your code can't find the element with an attribute id="navbar", so the variable navbar is null
  
  – Get Off My Lawn
  Mar 8 at 20:46
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Sorry, wrong code, check again !
  
  – Mark
  Mar 8 at 20:48
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  How to fix it, example please!
  
  – Mark
  Mar 8 at 20:49
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You need to execute that code after the html has been generated.
  
  – Get Off My Lawn
  Mar 8 at 20:50
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Possible duplicate of Why does jQuery or a DOM method such as getElementById not find the element?
  
  – Get Off My Lawn
  Mar 8 at 20:54
  

  
  
  
  

add a comment | 

0

JS CODE:

window.onscroll = function() myFunction();;

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() 
 if (window.pageYOffset >= sticky) 
 navbar.classList.add("sticky");
 else 
 navbar.classList.remove("sticky");
 

What's wrong with this? I found a w3school example of sticky navigation.
In the console it displays:

Uncaught TypeError: Cannot read property 'offsetTop' of null

javascript html navbar

share|improve this question

edited Mar 8 at 21:45

omikes

3,71682442

asked Mar 8 at 20:45

MarkMark

55

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Your code can't find the element with an attribute id="navbar", so the variable navbar is null
  
  – Get Off My Lawn
  Mar 8 at 20:46
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Sorry, wrong code, check again !
  
  – Mark
  Mar 8 at 20:48
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  How to fix it, example please!
  
  – Mark
  Mar 8 at 20:49
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You need to execute that code after the html has been generated.
  
  – Get Off My Lawn
  Mar 8 at 20:50
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Possible duplicate of Why does jQuery or a DOM method such as getElementById not find the element?
  
  – Get Off My Lawn
  Mar 8 at 20:54
  

  
  
  
  

add a comment | 

JS CODE:

window.onscroll = function() myFunction();;

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() 
 if (window.pageYOffset >= sticky) 
 navbar.classList.add("sticky");
 else 
 navbar.classList.remove("sticky");
 

What's wrong with this? I found a w3school example of sticky navigation.
In the console it displays:

Uncaught TypeError: Cannot read property 'offsetTop' of null

javascript html navbar

share|improve this question

edited Mar 8 at 21:45

omikes

3,71682442

asked Mar 8 at 20:45

MarkMark

55

window.onscroll = function() myFunction();;

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() 
 if (window.pageYOffset >= sticky) 
 navbar.classList.add("sticky");
 else 
 navbar.classList.remove("sticky");
 

share|improve this question

edited Mar 8 at 21:45

omikes

3,71682442

asked Mar 8 at 20:45

MarkMark

55

share|improve this question

edited Mar 8 at 21:45

omikes

3,71682442

asked Mar 8 at 20:45

MarkMark

55

edited Mar 8 at 21:45

omikes

3,71682442

edited Mar 8 at 21:45

omikes

3,71682442

asked Mar 8 at 20:45

MarkMark

55

asked Mar 8 at 20:45

MarkMark

55

2 Answers
2

active

oldest

votes

2

It looks like it can't find any element with the id "navbar".

This could be caused by not having an element with the id "navbar".

Alternatively, if you do have an element called "navbar", this code is likely running before the page has finished loading. The easiest way to fix this is to put the javascript at the bottom of your page. Alternatively, you can use jQuery's $(document).ready, or one of the vanilla alternatives from this question.

share|improve this answer

answered Mar 8 at 20:50

NicholasNicholas

33119

add a comment | 

0

Besause your demo has not a element named 'navbar'

You should create a tag like this div in your HTML code

 <div id='navbar'></div>

share|improve this answer

answered Mar 8 at 20:50

SaromCharsSaromChars

11

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I already have this...
  
  – Mark
  Mar 8 at 20:51
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Mark Exist another same id element??
  
  – SaromChars
  Mar 8 at 20:58
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @SaromChars that wouldn't matter, It would just return the first found id
  
  – Get Off My Lawn
  Mar 8 at 21:15
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55070744%2fcannot-read-property-offsettop-of-null-sticky-navbar%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

It looks like it can't find any element with the id "navbar".

This could be caused by not having an element with the id "navbar".

Alternatively, if you do have an element called "navbar", this code is likely running before the page has finished loading. The easiest way to fix this is to put the javascript at the bottom of your page. Alternatively, you can use jQuery's $(document).ready, or one of the vanilla alternatives from this question.

share|improve this answer

answered Mar 8 at 20:50

NicholasNicholas

33119

add a comment | 

2

It looks like it can't find any element with the id "navbar".

This could be caused by not having an element with the id "navbar".

Alternatively, if you do have an element called "navbar", this code is likely running before the page has finished loading. The easiest way to fix this is to put the javascript at the bottom of your page. Alternatively, you can use jQuery's $(document).ready, or one of the vanilla alternatives from this question.

share|improve this answer

answered Mar 8 at 20:50

NicholasNicholas

33119

add a comment | 

It looks like it can't find any element with the id "navbar".

This could be caused by not having an element with the id "navbar".

Alternatively, if you do have an element called "navbar", this code is likely running before the page has finished loading. The easiest way to fix this is to put the javascript at the bottom of your page. Alternatively, you can use jQuery's $(document).ready, or one of the vanilla alternatives from this question.

share|improve this answer

answered Mar 8 at 20:50

NicholasNicholas

33119

share|improve this answer

answered Mar 8 at 20:50

NicholasNicholas

33119

answered Mar 8 at 20:50

NicholasNicholas

33119

answered Mar 8 at 20:50

NicholasNicholas

33119

0

Besause your demo has not a element named 'navbar'

You should create a tag like this div in your HTML code

 <div id='navbar'></div>

share|improve this answer

answered Mar 8 at 20:50

SaromCharsSaromChars

11

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I already have this...
  
  – Mark
  Mar 8 at 20:51
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Mark Exist another same id element??
  
  – SaromChars
  Mar 8 at 20:58
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @SaromChars that wouldn't matter, It would just return the first found id
  
  – Get Off My Lawn
  Mar 8 at 21:15
  

  
  
  
  

add a comment | 

0

Besause your demo has not a element named 'navbar'

You should create a tag like this div in your HTML code

 <div id='navbar'></div>

share|improve this answer

answered Mar 8 at 20:50

SaromCharsSaromChars

11

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I already have this...
  
  – Mark
  Mar 8 at 20:51
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Mark Exist another same id element??
  
  – SaromChars
  Mar 8 at 20:58
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @SaromChars that wouldn't matter, It would just return the first found id
  
  – Get Off My Lawn
  Mar 8 at 21:15
  

  
  
  
  

add a comment | 

Besause your demo has not a element named 'navbar'

You should create a tag like this div in your HTML code

 <div id='navbar'></div>

share|improve this answer

answered Mar 8 at 20:50

SaromCharsSaromChars

11

 <div id='navbar'></div>

share|improve this answer

answered Mar 8 at 20:50

SaromCharsSaromChars

11

answered Mar 8 at 20:50

SaromCharsSaromChars

11

answered Mar 8 at 20:50

SaromCharsSaromChars

11