Cannot read property 'offsetTop' of null (sticky navbar) Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 23, 2019 at 00:00UTC (8:00pm US/Eastern) Data science time! April 2019 and salary with experience The Ask Question Wizard is Live!$(document).ready equivalent without jQueryWhy does jQuery or a DOM method such as getElementById not find the element?Getting “Cannot read property 'nodeType' of null” when calling ko.applyBindingsWhy does jQuery or a DOM method such as getElementById not find the element?Cannot read property 'value' of null from HTML inputUncaught TypeError: Cannot read property 'length' of null JSON-JQUERYUncaught TypeError: Cannot read property 'indexOf' of nullError Js Cannot read property 'setAttribute' of nulljavascript offsetTop property both successful and has an error at the same timeCannot read property 'addEventListener' of null in delete buttonUncaught TypeError: Cannot read property 'offsetTop' of nullUncaught TypeError: Cannot read property 'offsetTop' of null (navbar)
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)
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 23, 2019 at 00:00UTC (8:00pm US/Eastern)
Data science time! April 2019 and salary with experience
The Ask Question Wizard is Live!$(document).ready equivalent without jQueryWhy does jQuery or a DOM method such as getElementById not find the element?Getting “Cannot read property 'nodeType' of null” when calling ko.applyBindingsWhy does jQuery or a DOM method such as getElementById not find the element?Cannot read property 'value' of null from HTML inputUncaught TypeError: Cannot read property 'length' of null JSON-JQUERYUncaught TypeError: Cannot read property 'indexOf' of nullError Js Cannot read property 'setAttribute' of nulljavascript offsetTop property both successful and has an error at the same timeCannot read property 'addEventListener' of null in delete buttonUncaught TypeError: Cannot read property 'offsetTop' of nullUncaught TypeError: Cannot read property 'offsetTop' of null (navbar)
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
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
edited Mar 8 at 21:45
omikes
3,71682442
asked Mar 8 at 20:45
MarkMark
55
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
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 attributeid="navbar", so the variablenavbarisnull
– 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
edited Mar 8 at 21:45
omikes
3,71682442
asked Mar 8 at 20:45
MarkMark
55
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
javascript html navbar
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
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
edited Mar 8 at 21:45
omikes
3,71682442
3,71682442
asked Mar 8 at 20:45
MarkMark
55
asked Mar 8 at 20:45
MarkMark
55
asked Mar 8 at 20:45
MarkMark
55
55
Your code can't find the element with an attributeid="navbar", so the variablenavbarisnull
– 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 |
Your code can't find the element with an attributeid="navbar", so the variablenavbarisnull
– 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
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
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
Sorry, wrong code, check again !
– Mark
Mar 8 at 20:48
How to fix it, example please!
– Mark
Mar 8 at 20:49
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
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
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 |
2 Answers
2
active
oldest
votes
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.
answered Mar 8 at 20:50
NicholasNicholas
33119
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>
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
);
);
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
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
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
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.
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.
answered Mar 8 at 20:50
NicholasNicholas
33119
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.
answered Mar 8 at 20:50
NicholasNicholas
33119
answered Mar 8 at 20:50
NicholasNicholas
33119
answered Mar 8 at 20:50
NicholasNicholas
33119
answered Mar 8 at 20:50
NicholasNicholas
33119
33119
add a comment |
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>
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>
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>
answered Mar 8 at 20:50
SaromCharsSaromChars
11
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>
answered Mar 8 at 20:50
SaromCharsSaromChars
11
answered Mar 8 at 20:50
SaromCharsSaromChars
11
answered Mar 8 at 20:50
SaromCharsSaromChars
11
answered Mar 8 at 20:50
SaromCharsSaromChars
11
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 |
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
I already have this...
– Mark
Mar 8 at 20:51
I already have this...
– Mark
Mar 8 at 20:51
@Mark Exist another same id element??
– SaromChars
Mar 8 at 20:58
@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
@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 |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
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
Required, but never shown
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
Required, but never shown
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
Required, but never shown
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
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Your code can't find the element with an attribute
id="navbar", so the variablenavbarisnull– 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