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;








0















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:



enter image description here



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










share|improve this question



















  • 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












  • 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

















0















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:



enter image description here



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










share|improve this question



















  • 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












  • 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













0












0








0








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:



enter image description here



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










share|improve this question
















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:



enter image description here



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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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 as this.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





    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











  • 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












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
);



);













draft saved

draft discarded


















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















draft saved

draft discarded
















































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.




draft saved


draft discarded














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





















































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







Popular posts from this blog

AWS Lex not identifying response if by a variable The 2019 Stack Overflow Developer Survey Results Are In Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern) The Ask Question Wizard is Live! Data science time! April 2019 and salary with experienceEnforcing custom enumeration in AWS LEX for slot valuesHow to give response based on user response in Amazon Lex?Intercepting AWS Lambda Response to a AWS Lex QueryLex chat bot error: Reached second execution of fulfillment lambda on the same utteranceamazon lex showing invalid responseLambda response send back to Lex slot?Response card in Amazon lexAmazon Lex - Lambda response return HTML to botHow can I solve 424 (Failed Dependency) (python) obtained from Amazon lex?

Алба-Юлія

Захаров Федір Захарович