Can i use a percentage as a value in scrolltop?

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.

edited Nov 19 '18 at 16:08

morten.c

2,65522938

asked Nov 19 '18 at 13:36

Jan 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 if scrollTop > maxScrollTop * 0.8

– Thomas Huijzer
Nov 19 '18 at 13:58

add a comment |

$(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.

edited Nov 19 '18 at 16:08

morten.c

2,65522938

asked Nov 19 '18 at 13:36

Jan 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 if scrollTop > maxScrollTop * 0.8

– Thomas Huijzer
Nov 19 '18 at 13:58

add a comment |

$(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.

edited Nov 19 '18 at 16:08

morten.c

2,65522938

asked Nov 19 '18 at 13:36

Jan Fernando Pavel Gil

235

$(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 Gil

235

edited Nov 19 '18 at 16:08

morten.c

2,65522938

asked Nov 19 '18 at 13:36

Jan 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

asked Nov 19 '18 at 13:36

Jan Fernando Pavel Gil

235

asked Nov 19 '18 at 13:36

Jan Fernando Pavel Gil

235

asked Nov 19 '18 at 13:36

Jan 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 if scrollTop > 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 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

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>

edited Nov 19 '18 at 14:17

answered Nov 19 '18 at 13:50

scraaappy

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 |

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

Post as a guest

Name

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

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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>

edited Nov 19 '18 at 14:17

answered Nov 19 '18 at 13:50

scraaappy

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 |

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>

edited Nov 19 '18 at 14:17

answered Nov 19 '18 at 13:50

scraaappy

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 |

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>

edited Nov 19 '18 at 14:17

answered Nov 19 '18 at 13:50

scraaappy

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>

edited Nov 19 '18 at 14:17

answered Nov 19 '18 at 13:50

scraaappy

2,23121326

edited Nov 19 '18 at 14:17

answered Nov 19 '18 at 13:50

scraaappy

2,23121326

answered Nov 19 '18 at 13:50

scraaappy

2,23121326

answered Nov 19 '18 at 13:50

scraaappy

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

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 |

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 Gil

235

add a comment |

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 Gil

235

add a comment |

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 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 Gil

235

answered Nov 20 '18 at 8:33

Jan Fernando Pavel Gil

235

answered Nov 20 '18 at 8:33

Jan Fernando Pavel Gil

235

answered Nov 20 '18 at 8:33

Jan Fernando Pavel Gil

235

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

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk