Как переключить класс на scrollToTop и scrollToBottom только в Javascript

Мне нужен способ добавить класс, когда документ прокручивается вверх, и удалять его, когда документ прокручивается вниз, только с помощью Javascript без jquery или любого другого плагина.


javascript jquery scrolltop
person rateb    schedule 27.07.2018    source источник
comment
что вы пробовали до сих пор?   -  person messerbill    schedule 27.07.2018
comment
зачем помечать jquery, если вам не нужны ответы jquery?   -  person Pete    schedule 27.07.2018
comment
Возможный дубликат Захват события прокрутки вниз?   -  person messerbill    schedule 27.07.2018
comment
посмотрите здесь: stackoverflow.com/a/32757060/4450187   -  person messerbill    schedule 27.07.2018
comment
Что вы уже пробовали...   -  person Dammeul    schedule 27.07.2018
comment
я не пробовал, потому что не знаю, как это сделать   -  person rateb    schedule 27.07.2018
comment
извините за тег Jquery, который я удалил   -  person rateb    schedule 27.07.2018

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать эту функцию, чтобы проверить, была ли страница прокручена вниз.

window.onscroll = function(){
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
     //bottom of page
    document.getElementsByClassName("header")[0].classList.add("red");
}
}

Вы можете использовать эту функцию, чтобы проверить, была ли страница прокручена вверх.

window.onscroll = function(){
var B= document.body; //IE 'quirks'
    var D= document.documentElement; //IE with doctype
    D= (D.clientHeight)? D: B;

if (D.scrollTop == 0)
    {
       //top of page
        document.getElementsByClassName("header")[0].classList.remove("red");
    }    
}


.header{
  text-align: center;
  position: fixed;
  width: 100%;
  top: 0;
  border: 1px solid black;
  font-size: 20px;
  left: 0;
  background-color: green;
}

.red{
  background-color: red;
}

html, body{
 height: 2000px;
}
<html>
<body>
<div class="header">Header</div>
<script>
window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
         //bottom of page
        document.getElementsByClassName("header")[0].classList.add("red");
    }

   var B= document.body; //IE 'quirks'
    var D= document.documentElement; //IE with doctype
    D= (D.clientHeight)? D: B;

if (D.scrollTop == 0)
	{
       //top of page
		document.getElementsByClassName("header")[0].classList.remove("red");
	}    
   };
</script>
</body>
</html>

person Unmitigated    schedule 27.07.2018
comment
нет человек, это не то, что я прошу. я сказал переключить этот код, просто добавьте класс, а не удаляйте класс - person rateb; 27.07.2018
comment
@rateb Не могли бы вы объяснить, что вы имеете в виду? - person Unmitigated; 27.07.2018