Могу ли я использовать процент в качестве значения в scrolltop? - PullRequest
Новая
       21

Могу ли я использовать процент в качестве значения в scrolltop?

0 голосов
/ 19 ноября 2018

Я довольно плохо знаком с HTML в целом.У меня есть следующий код, и мне было интересно, если есть какой-либо способ использовать процент вместо фиксированного значения.Я искал, но я не мог найти простое решение. 

$(window).scroll(function () { 
    if ($(this).scrollTop() > 445 && $(this).scrollTop() < 1425 ) { 
        nav.addClass("f-nav");
    } else { 
        nav.removeClass("f-nav");
    }

В основном я хочу, чтобы класс был удален после прокрутки более 80% страницы, а не после 1425 пикселей, чтобы он также работалправильно, если размер окна изменен.

Ответы [ 2 ]

0 голосов
/ 20 ноября 2018

Обновление!В итоге я использовал $(document).height() вместо scrolltop, потому что это позволило мне легко ввести процент.Поэтому мой код в итоге выглядел так: 

$(window).scroll(function () { 
    if ($(this).scrollTop() > 445) { 
        nav.addClass("f-nav");
    if ($(this).scrollTop() > $(document).height()*0.64) 
        nav.removeClass("f-nav");
    }       
});

В любом случае, спасибо за помощь, и я надеюсь, что кто-то найдет это полезным!

0 голосов
/ 19 ноября 2018

Из документа scrollTop () ожидает число, представляющее позицию в пикселях.

Но вы можете рассчитать, когда прокрутка достигнет 80%, например, что-то вроде

Псевдо-код: 

if ((this.scrollTop + this.height) / content.height >= .8){
// do something
}

См. Рабочий фрагмент ниже, например, 

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