Can i use a percentage as a value in scrolltop?
4
I'm pretty new to HTML in general. I have the following code and I was wondering if there is any way of using a percentage instead of a fixed value. I have searched but I couldn't find a simple solution.
$(window).scroll(function () {
if ($(this).scrollTop() > 445 && $(this).scrollTop() < 1425 ) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
Basically what I want is the class to be removed after scrolling past 80% of the page, instead of after 1425px so that it also works properly if the window size is modified.
javascript jquery html scroll scrolltop
edited Nov 19 '18 at 16:08
morten.c
2,65522938
asked Nov 19 '18 at 13:36
Jan Fernando Pavel GilJan Fernando Pavel Gil
235
add a comment |
4
I'm pretty new to HTML in general. I have the following code and I was wondering if there is any way of using a percentage instead of a fixed value. I have searched but I couldn't find a simple solution.
$(window).scroll(function () {
if ($(this).scrollTop() > 445 && $(this).scrollTop() < 1425 ) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
Basically what I want is the class to be removed after scrolling past 80% of the page, instead of after 1425px so that it also works properly if the window size is modified.
javascript jquery html scroll scrolltop
edited Nov 19 '18 at 16:08
morten.c
2,65522938
asked Nov 19 '18 at 13:36
Jan Fernando Pavel GilJan Fernando Pavel Gil
235
When the page is smaller than the windows size you can't scroll. So I think you mean after 80% of scrolling. Take a look at this answer: stackoverflow.com/questions/17688595/… to calculate what the max scrollTop is. Then you can check ifscrollTop > maxScrollTop * 0.8
– Thomas Huijzer
Nov 19 '18 at 13:58
add a comment |
4
4
4
I'm pretty new to HTML in general. I have the following code and I was wondering if there is any way of using a percentage instead of a fixed value. I have searched but I couldn't find a simple solution.
$(window).scroll(function () {
if ($(this).scrollTop() > 445 && $(this).scrollTop() < 1425 ) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
Basically what I want is the class to be removed after scrolling past 80% of the page, instead of after 1425px so that it also works properly if the window size is modified.
javascript jquery html scroll scrolltop
edited Nov 19 '18 at 16:08
morten.c
2,65522938
asked Nov 19 '18 at 13:36
Jan Fernando Pavel GilJan Fernando Pavel Gil
235
I'm pretty new to HTML in general. I have the following code and I was wondering if there is any way of using a percentage instead of a fixed value. I have searched but I couldn't find a simple solution.
$(window).scroll(function () {
if ($(this).scrollTop() > 445 && $(this).scrollTop() < 1425 ) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
Basically what I want is the class to be removed after scrolling past 80% of the page, instead of after 1425px so that it also works properly if the window size is modified.
javascript jquery html scroll scrolltop
javascript jquery html scroll scrolltop
edited Nov 19 '18 at 16:08
morten.c
2,65522938
asked Nov 19 '18 at 13:36
Jan Fernando Pavel GilJan Fernando Pavel Gil
235
edited Nov 19 '18 at 16:08
morten.c
2,65522938
asked Nov 19 '18 at 13:36
Jan Fernando Pavel GilJan Fernando Pavel Gil
235
edited Nov 19 '18 at 16:08
morten.c
2,65522938
edited Nov 19 '18 at 16:08
morten.c
2,65522938
edited Nov 19 '18 at 16:08
morten.c
2,65522938
2,65522938
asked Nov 19 '18 at 13:36
Jan Fernando Pavel GilJan Fernando Pavel Gil
235
asked Nov 19 '18 at 13:36
Jan Fernando Pavel GilJan Fernando Pavel Gil
235
asked Nov 19 '18 at 13:36
Jan Fernando Pavel GilJan Fernando Pavel Gil
235
235
When the page is smaller than the windows size you can't scroll. So I think you mean after 80% of scrolling. Take a look at this answer: stackoverflow.com/questions/17688595/… to calculate what the max scrollTop is. Then you can check ifscrollTop > maxScrollTop * 0.8
– Thomas Huijzer
Nov 19 '18 at 13:58
add a comment |
When the page is smaller than the windows size you can't scroll. So I think you mean after 80% of scrolling. Take a look at this answer: stackoverflow.com/questions/17688595/… to calculate what the max scrollTop is. Then you can check ifscrollTop > maxScrollTop * 0.8
– Thomas Huijzer
Nov 19 '18 at 13:58
When the page is smaller than the windows size you can't scroll. So I think you mean after 80% of scrolling. Take a look at this answer: stackoverflow.com/questions/17688595/… to calculate what the max scrollTop is. Then you can check if
scrollTop > maxScrollTop * 0.8– Thomas Huijzer
Nov 19 '18 at 13:58
When the page is smaller than the windows size you can't scroll. So I think you mean after 80% of scrolling. Take a look at this answer: stackoverflow.com/questions/17688595/… to calculate what the max scrollTop is. Then you can check if
scrollTop > maxScrollTop * 0.8– Thomas Huijzer
Nov 19 '18 at 13:58
add a comment |
2 Answers
2
active
oldest
votes
4
From the doc, scrollTop() expects a number which represents position in pixel.
But you can calculate when scroll reaches 80% with, for example, something like
Pseudo-code:
if ((this.scrollTop + this.height) / content.height >= .8){
// do something
}
See the working snippet below for example
$("#container").scroll(function () {
if (($(this).scrollTop()+$(this).height())/$("#content").height() >= .8) {
$("#content").addClass("scrolled");
}else{
$("#content").removeClass("scrolled");
}
});#container{
width:80%;
height:300px;
border: solid 1px red;
overflow:auto;
}
#content{
width:80%;
height:1000px;
border: solid 1px gray;
transition: background-color 1s;
}
#content.scrolled{
background-color:blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="content"></div>
</div>answered Nov 19 '18 at 13:50
scraaappyscraaappy
2,23121326
So it should look like this? $(window).scroll(function () { if ($(this).scrollTop() > 445 && $(this).scrollTop() < 1425 ) { nav.addClass("f-nav"); if ($(this).scrollTop()/$(this).height() >= .8){ nav.removeClass("f-nav");} }
– Jan Fernando Pavel Gil
Nov 19 '18 at 13:56
whoops my bad, can't press enter on a comment. But basically changing the "else" for what you said, right?
– Jan Fernando Pavel Gil
Nov 19 '18 at 13:57
@JanFernandoPavelGil see my edit
– scraaappy
Nov 19 '18 at 14:17
Not quite what i was looking for but it does solve my problem, thanks!
– Jan Fernando Pavel Gil
Nov 19 '18 at 14:21
add a comment |
0
Update! I ended up using $(document).height() instead of scrolltop, because it allowed me to introduce a percentage easily. So my code ended up looking like this:
$(window).scroll(function () {
if ($(this).scrollTop() > 445) {
nav.addClass("f-nav");
if ($(this).scrollTop() > $(document).height()*0.64)
nav.removeClass("f-nav");
}
});
Anyways, thanks for the help and I hope someone can find this useful!
answered Nov 20 '18 at 8:33
Jan Fernando Pavel GilJan Fernando Pavel Gil
235
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53375821%2fcan-i-use-a-percentage-as-a-value-in-scrolltop%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
4
From the doc, scrollTop() expects a number which represents position in pixel.
But you can calculate when scroll reaches 80% with, for example, something like
Pseudo-code:
if ((this.scrollTop + this.height) / content.height >= .8){
// do something
}
See the working snippet below for example
$("#container").scroll(function () {
if (($(this).scrollTop()+$(this).height())/$("#content").height() >= .8) {
$("#content").addClass("scrolled");
}else{
$("#content").removeClass("scrolled");
}
});#container{
width:80%;
height:300px;
border: solid 1px red;
overflow:auto;
}
#content{
width:80%;
height:1000px;
border: solid 1px gray;
transition: background-color 1s;
}
#content.scrolled{
background-color:blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="content"></div>
</div>answered Nov 19 '18 at 13:50
scraaappyscraaappy
2,23121326
So it should look like this? $(window).scroll(function () { if ($(this).scrollTop() > 445 && $(this).scrollTop() < 1425 ) { nav.addClass("f-nav"); if ($(this).scrollTop()/$(this).height() >= .8){ nav.removeClass("f-nav");} }
– Jan Fernando Pavel Gil
Nov 19 '18 at 13:56
whoops my bad, can't press enter on a comment. But basically changing the "else" for what you said, right?
– Jan Fernando Pavel Gil
Nov 19 '18 at 13:57
@JanFernandoPavelGil see my edit
– scraaappy
Nov 19 '18 at 14:17
Not quite what i was looking for but it does solve my problem, thanks!
– Jan Fernando Pavel Gil
Nov 19 '18 at 14:21
add a comment |
4
From the doc, scrollTop() expects a number which represents position in pixel.
But you can calculate when scroll reaches 80% with, for example, something like
Pseudo-code:
if ((this.scrollTop + this.height) / content.height >= .8){
// do something
}
See the working snippet below for example
$("#container").scroll(function () {
if (($(this).scrollTop()+$(this).height())/$("#content").height() >= .8) {
$("#content").addClass("scrolled");
}else{
$("#content").removeClass("scrolled");
}
});#container{
width:80%;
height:300px;
border: solid 1px red;
overflow:auto;
}
#content{
width:80%;
height:1000px;
border: solid 1px gray;
transition: background-color 1s;
}
#content.scrolled{
background-color:blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="content"></div>
</div>answered Nov 19 '18 at 13:50
scraaappyscraaappy
2,23121326
So it should look like this? $(window).scroll(function () { if ($(this).scrollTop() > 445 && $(this).scrollTop() < 1425 ) { nav.addClass("f-nav"); if ($(this).scrollTop()/$(this).height() >= .8){ nav.removeClass("f-nav");} }
– Jan Fernando Pavel Gil
Nov 19 '18 at 13:56
whoops my bad, can't press enter on a comment. But basically changing the "else" for what you said, right?
– Jan Fernando Pavel Gil
Nov 19 '18 at 13:57
@JanFernandoPavelGil see my edit
– scraaappy
Nov 19 '18 at 14:17
Not quite what i was looking for but it does solve my problem, thanks!
– Jan Fernando Pavel Gil
Nov 19 '18 at 14:21
add a comment |
4
4
4
From the doc, scrollTop() expects a number which represents position in pixel.
But you can calculate when scroll reaches 80% with, for example, something like
Pseudo-code:
if ((this.scrollTop + this.height) / content.height >= .8){
// do something
}
See the working snippet below for example
$("#container").scroll(function () {
if (($(this).scrollTop()+$(this).height())/$("#content").height() >= .8) {
$("#content").addClass("scrolled");
}else{
$("#content").removeClass("scrolled");
}
});#container{
width:80%;
height:300px;
border: solid 1px red;
overflow:auto;
}
#content{
width:80%;
height:1000px;
border: solid 1px gray;
transition: background-color 1s;
}
#content.scrolled{
background-color:blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="content"></div>
</div>answered Nov 19 '18 at 13:50
scraaappyscraaappy
2,23121326
From the doc, scrollTop() expects a number which represents position in pixel.
But you can calculate when scroll reaches 80% with, for example, something like
Pseudo-code:
if ((this.scrollTop + this.height) / content.height >= .8){
// do something
}
See the working snippet below for example
$("#container").scroll(function () {
if (($(this).scrollTop()+$(this).height())/$("#content").height() >= .8) {
$("#content").addClass("scrolled");
}else{
$("#content").removeClass("scrolled");
}
});#container{
width:80%;
height:300px;
border: solid 1px red;
overflow:auto;
}
#content{
width:80%;
height:1000px;
border: solid 1px gray;
transition: background-color 1s;
}
#content.scrolled{
background-color:blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="content"></div>
</div>$("#container").scroll(function () {
if (($(this).scrollTop()+$(this).height())/$("#content").height() >= .8) {
$("#content").addClass("scrolled");
}else{
$("#content").removeClass("scrolled");
}
});#container{
width:80%;
height:300px;
border: solid 1px red;
overflow:auto;
}
#content{
width:80%;
height:1000px;
border: solid 1px gray;
transition: background-color 1s;
}
#content.scrolled{
background-color:blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="content"></div>
</div>$("#container").scroll(function () {
if (($(this).scrollTop()+$(this).height())/$("#content").height() >= .8) {
$("#content").addClass("scrolled");
}else{
$("#content").removeClass("scrolled");
}
});#container{
width:80%;
height:300px;
border: solid 1px red;
overflow:auto;
}
#content{
width:80%;
height:1000px;
border: solid 1px gray;
transition: background-color 1s;
}
#content.scrolled{
background-color:blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="content"></div>
</div>answered Nov 19 '18 at 13:50
scraaappyscraaappy
2,23121326
edited Nov 19 '18 at 14:17
answered Nov 19 '18 at 13:50
scraaappyscraaappy
2,23121326
answered Nov 19 '18 at 13:50
scraaappyscraaappy
2,23121326
answered Nov 19 '18 at 13:50
scraaappyscraaappy
2,23121326
2,23121326
So it should look like this? $(window).scroll(function () { if ($(this).scrollTop() > 445 && $(this).scrollTop() < 1425 ) { nav.addClass("f-nav"); if ($(this).scrollTop()/$(this).height() >= .8){ nav.removeClass("f-nav");} }
– Jan Fernando Pavel Gil
Nov 19 '18 at 13:56
whoops my bad, can't press enter on a comment. But basically changing the "else" for what you said, right?
– Jan Fernando Pavel Gil
Nov 19 '18 at 13:57
@JanFernandoPavelGil see my edit
– scraaappy
Nov 19 '18 at 14:17
Not quite what i was looking for but it does solve my problem, thanks!
– Jan Fernando Pavel Gil
Nov 19 '18 at 14:21
add a comment |
So it should look like this? $(window).scroll(function () { if ($(this).scrollTop() > 445 && $(this).scrollTop() < 1425 ) { nav.addClass("f-nav"); if ($(this).scrollTop()/$(this).height() >= .8){ nav.removeClass("f-nav");} }
– Jan Fernando Pavel Gil
Nov 19 '18 at 13:56
whoops my bad, can't press enter on a comment. But basically changing the "else" for what you said, right?
– Jan Fernando Pavel Gil
Nov 19 '18 at 13:57
@JanFernandoPavelGil see my edit
– scraaappy
Nov 19 '18 at 14:17
Not quite what i was looking for but it does solve my problem, thanks!
– Jan Fernando Pavel Gil
Nov 19 '18 at 14:21
So it should look like this? $(window).scroll(function () { if ($(this).scrollTop() > 445 && $(this).scrollTop() < 1425 ) { nav.addClass("f-nav"); if ($(this).scrollTop()/$(this).height() >= .8){ nav.removeClass("f-nav");} }
– Jan Fernando Pavel Gil
Nov 19 '18 at 13:56
So it should look like this? $(window).scroll(function () { if ($(this).scrollTop() > 445 && $(this).scrollTop() < 1425 ) { nav.addClass("f-nav"); if ($(this).scrollTop()/$(this).height() >= .8){ nav.removeClass("f-nav");} }
– Jan Fernando Pavel Gil
Nov 19 '18 at 13:56
whoops my bad, can't press enter on a comment. But basically changing the "else" for what you said, right?
– Jan Fernando Pavel Gil
Nov 19 '18 at 13:57
whoops my bad, can't press enter on a comment. But basically changing the "else" for what you said, right?
– Jan Fernando Pavel Gil
Nov 19 '18 at 13:57
@JanFernandoPavelGil see my edit
– scraaappy
Nov 19 '18 at 14:17
@JanFernandoPavelGil see my edit
– scraaappy
Nov 19 '18 at 14:17
Not quite what i was looking for but it does solve my problem, thanks!
– Jan Fernando Pavel Gil
Nov 19 '18 at 14:21
Not quite what i was looking for but it does solve my problem, thanks!
– Jan Fernando Pavel Gil
Nov 19 '18 at 14:21
add a comment |
0
Update! I ended up using $(document).height() instead of scrolltop, because it allowed me to introduce a percentage easily. So my code ended up looking like this:
$(window).scroll(function () {
if ($(this).scrollTop() > 445) {
nav.addClass("f-nav");
if ($(this).scrollTop() > $(document).height()*0.64)
nav.removeClass("f-nav");
}
});
Anyways, thanks for the help and I hope someone can find this useful!
answered Nov 20 '18 at 8:33
Jan Fernando Pavel GilJan Fernando Pavel Gil
235
add a comment |
0
Update! I ended up using $(document).height() instead of scrolltop, because it allowed me to introduce a percentage easily. So my code ended up looking like this:
$(window).scroll(function () {
if ($(this).scrollTop() > 445) {
nav.addClass("f-nav");
if ($(this).scrollTop() > $(document).height()*0.64)
nav.removeClass("f-nav");
}
});
Anyways, thanks for the help and I hope someone can find this useful!
answered Nov 20 '18 at 8:33
Jan Fernando Pavel GilJan Fernando Pavel Gil
235
add a comment |
0
0
0
Update! I ended up using $(document).height() instead of scrolltop, because it allowed me to introduce a percentage easily. So my code ended up looking like this:
$(window).scroll(function () {
if ($(this).scrollTop() > 445) {
nav.addClass("f-nav");
if ($(this).scrollTop() > $(document).height()*0.64)
nav.removeClass("f-nav");
}
});
Anyways, thanks for the help and I hope someone can find this useful!
answered Nov 20 '18 at 8:33
Jan Fernando Pavel GilJan Fernando Pavel Gil
235
Update! I ended up using $(document).height() instead of scrolltop, because it allowed me to introduce a percentage easily. So my code ended up looking like this:
$(window).scroll(function () {
if ($(this).scrollTop() > 445) {
nav.addClass("f-nav");
if ($(this).scrollTop() > $(document).height()*0.64)
nav.removeClass("f-nav");
}
});
Anyways, thanks for the help and I hope someone can find this useful!
answered Nov 20 '18 at 8:33
Jan Fernando Pavel GilJan Fernando Pavel Gil
235
answered Nov 20 '18 at 8:33
Jan Fernando Pavel GilJan Fernando Pavel Gil
235
answered Nov 20 '18 at 8:33
Jan Fernando Pavel GilJan Fernando Pavel Gil
235
answered Nov 20 '18 at 8:33
Jan Fernando Pavel GilJan Fernando Pavel Gil
235
235
add a comment |
add a comment |
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
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%2f53375821%2fcan-i-use-a-percentage-as-a-value-in-scrolltop%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
When the page is smaller than the windows size you can't scroll. So I think you mean after 80% of scrolling. Take a look at this answer: stackoverflow.com/questions/17688595/… to calculate what the max scrollTop is. Then you can check if
scrollTop > maxScrollTop * 0.8– Thomas Huijzer
Nov 19 '18 at 13:58