sticky element with JavaScript (VueJS)How do JavaScript closures work?What is the most efficient way to deep clone an object in JavaScript?How do I check if an element is hidden in jQuery?How do I remove a property from a JavaScript object?Which equals operator (== vs ===) should be used in JavaScript comparisons?How do I include a JavaScript file in another JavaScript file?What does “use strict” do in JavaScript, and what is the reasoning behind it?How to check whether a string contains a substring in JavaScript?How do I remove a particular element from an array in JavaScript?How to use foreach with array in JavaScript?
How is it possible for user's password to be changed after storage was encrypted? (on OS X, Android)
Is there a way to make member function NOT callable from constructor?
Eliminate empty elements from a list with a specific pattern
What is GPS' 19 year rollover and does it present a cybersecurity issue?
Unbreakable Formation vs. Cry of the Carnarium
What happens when a metallic dragon and a chromatic dragon mate?
Denied boarding due to overcrowding, Sparpreis ticket. What are my rights?
Could Giant Ground Sloths have been a Good Pack Animal for the Ancient Mayans
Is there a familial term for apples and pears?
Why do UK politicians seemingly ignore opinion polls on Brexit?
Is Fable (1996) connected in any way to the Fable franchise from Lionhead Studios?
If a centaur druid Wild Shapes into a Giant Elk, do their Charge features stack?
Are white and non-white police officers equally likely to kill black suspects?
How can I add custom success page
Information to fellow intern about hiring?
Why is the design of haulage companies so “special”?
How many letters suffice to construct words with no repetition?
When blogging recipes, how can I support both readers who want the narrative/journey and ones who want the printer-friendly recipe?
Doomsday-clock for my fantasy planet
Domain expired, GoDaddy holds it and is asking more money
Add an angle to a sphere
Is Social Media Science Fiction?
Does it makes sense to buy a new cycle to learn riding?
What do you call something that goes against the spirit of the law, but is legal when interpreting the law to the letter?
sticky element with JavaScript (VueJS)
How do JavaScript closures work?What is the most efficient way to deep clone an object in JavaScript?How do I check if an element is hidden in jQuery?How do I remove a property from a JavaScript object?Which equals operator (== vs ===) should be used in JavaScript comparisons?How do I include a JavaScript file in another JavaScript file?What does “use strict” do in JavaScript, and what is the reasoning behind it?How to check whether a string contains a substring in JavaScript?How do I remove a particular element from an array in JavaScript?How to use foreach with array in JavaScript?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I want to create a sticky element with JavaScript. The plan is to get the initial position of my element. And when my window.scrollY is greater than the initial position, the element should become sticky. So far so good.
All works like expected, except that when window.scrollY is greater than this.selectionInitialPosition nothing happens.
Here is what I have:
computed property:
selectionInitialPosition()
return this.$refs.selectionHeader.getBoundingClientRect().top;
,
That returns a number, like expected: for example: 440
Here is my scrollHandler:
handleScrollEvent()
console.log('initial', this.selectionInitialPosition);
console.log('scrollY', window.scrollY);
console.log('?', window.scollY >= this.selectionInitialPosition);
if (this.selectionInitialPosition < window.scollY)
this.isSticky = true;
Take a look at console.log('?', window.scollY >= this.selectionInitialPosition);
And here is what I see in the Chrome console:

Please explain that to me. I'm going crazy here.
EDIT: As @jom pointed out, I had a typo in my if-statement.
It should be window.scrollY >= this.selectionInitialPosition
javascript vue.js
add a comment |
I want to create a sticky element with JavaScript. The plan is to get the initial position of my element. And when my window.scrollY is greater than the initial position, the element should become sticky. So far so good.
All works like expected, except that when window.scrollY is greater than this.selectionInitialPosition nothing happens.
Here is what I have:
computed property:
selectionInitialPosition()
return this.$refs.selectionHeader.getBoundingClientRect().top;
,
That returns a number, like expected: for example: 440
Here is my scrollHandler:
handleScrollEvent()
console.log('initial', this.selectionInitialPosition);
console.log('scrollY', window.scrollY);
console.log('?', window.scollY >= this.selectionInitialPosition);
if (this.selectionInitialPosition < window.scollY)
this.isSticky = true;
Take a look at console.log('?', window.scollY >= this.selectionInitialPosition);
And here is what I see in the Chrome console:

Please explain that to me. I'm going crazy here.
EDIT: As @jom pointed out, I had a typo in my if-statement.
It should be window.scrollY >= this.selectionInitialPosition
javascript vue.js
2
You have a typo in here:console.log('?', window.scollY >= this.selectionInitialPosition);as well asthis.selectionInitialPosition < window.scollY... 👉 "scollY"
– jom
Mar 8 at 7:12
Jesus Christ🤦♂️ Thank you @jom
– Ic3m4n
Mar 8 at 7:13
No problem. It happens. :)
– jom
Mar 8 at 7:14
@jom you should post it as an answer so it can be accepted :)
– Martijn Vissers
Mar 8 at 7:49
add a comment |
I want to create a sticky element with JavaScript. The plan is to get the initial position of my element. And when my window.scrollY is greater than the initial position, the element should become sticky. So far so good.
All works like expected, except that when window.scrollY is greater than this.selectionInitialPosition nothing happens.
Here is what I have:
computed property:
selectionInitialPosition()
return this.$refs.selectionHeader.getBoundingClientRect().top;
,
That returns a number, like expected: for example: 440
Here is my scrollHandler:
handleScrollEvent()
console.log('initial', this.selectionInitialPosition);
console.log('scrollY', window.scrollY);
console.log('?', window.scollY >= this.selectionInitialPosition);
if (this.selectionInitialPosition < window.scollY)
this.isSticky = true;
Take a look at console.log('?', window.scollY >= this.selectionInitialPosition);
And here is what I see in the Chrome console:

Please explain that to me. I'm going crazy here.
EDIT: As @jom pointed out, I had a typo in my if-statement.
It should be window.scrollY >= this.selectionInitialPosition
javascript vue.js
I want to create a sticky element with JavaScript. The plan is to get the initial position of my element. And when my window.scrollY is greater than the initial position, the element should become sticky. So far so good.
All works like expected, except that when window.scrollY is greater than this.selectionInitialPosition nothing happens.
Here is what I have:
computed property:
selectionInitialPosition()
return this.$refs.selectionHeader.getBoundingClientRect().top;
,
That returns a number, like expected: for example: 440
Here is my scrollHandler:
handleScrollEvent()
console.log('initial', this.selectionInitialPosition);
console.log('scrollY', window.scrollY);
console.log('?', window.scollY >= this.selectionInitialPosition);
if (this.selectionInitialPosition < window.scollY)
this.isSticky = true;
Take a look at console.log('?', window.scollY >= this.selectionInitialPosition);
And here is what I see in the Chrome console:

Please explain that to me. I'm going crazy here.
EDIT: As @jom pointed out, I had a typo in my if-statement.
It should be window.scrollY >= this.selectionInitialPosition
javascript vue.js
javascript vue.js
edited Mar 8 at 7:15
Ic3m4n
asked Mar 8 at 7:05
Ic3m4nIc3m4n
8719
8719
2
You have a typo in here:console.log('?', window.scollY >= this.selectionInitialPosition);as well asthis.selectionInitialPosition < window.scollY... 👉 "scollY"
– jom
Mar 8 at 7:12
Jesus Christ🤦♂️ Thank you @jom
– Ic3m4n
Mar 8 at 7:13
No problem. It happens. :)
– jom
Mar 8 at 7:14
@jom you should post it as an answer so it can be accepted :)
– Martijn Vissers
Mar 8 at 7:49
add a comment |
2
You have a typo in here:console.log('?', window.scollY >= this.selectionInitialPosition);as well asthis.selectionInitialPosition < window.scollY... 👉 "scollY"
– jom
Mar 8 at 7:12
Jesus Christ🤦♂️ Thank you @jom
– Ic3m4n
Mar 8 at 7:13
No problem. It happens. :)
– jom
Mar 8 at 7:14
@jom you should post it as an answer so it can be accepted :)
– Martijn Vissers
Mar 8 at 7:49
2
2
You have a typo in here:
console.log('?', window.scollY >= this.selectionInitialPosition); as well as this.selectionInitialPosition < window.scollY... 👉 "scollY"– jom
Mar 8 at 7:12
You have a typo in here:
console.log('?', window.scollY >= this.selectionInitialPosition); as well as this.selectionInitialPosition < window.scollY... 👉 "scollY"– jom
Mar 8 at 7:12
Jesus Christ🤦♂️ Thank you @jom
– Ic3m4n
Mar 8 at 7:13
Jesus Christ🤦♂️ Thank you @jom
– Ic3m4n
Mar 8 at 7:13
No problem. It happens. :)
– jom
Mar 8 at 7:14
No problem. It happens. :)
– jom
Mar 8 at 7:14
@jom you should post it as an answer so it can be accepted :)
– Martijn Vissers
Mar 8 at 7:49
@jom you should post it as an answer so it can be accepted :)
– Martijn Vissers
Mar 8 at 7:49
add a comment |
0
active
oldest
votes
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%2f55058319%2fsticky-element-with-javascript-vuejs%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f55058319%2fsticky-element-with-javascript-vuejs%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
2
You have a typo in here:
console.log('?', window.scollY >= this.selectionInitialPosition);as well asthis.selectionInitialPosition < window.scollY... 👉 "scollY"– jom
Mar 8 at 7:12
Jesus Christ🤦♂️ Thank you @jom
– Ic3m4n
Mar 8 at 7:13
No problem. It happens. :)
– jom
Mar 8 at 7:14
@jom you should post it as an answer so it can be accepted :)
– Martijn Vissers
Mar 8 at 7:49