Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 21.04.2020, 15:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сергей Ракипов,
ок
Ответить с цитированием
  #22 (permalink)  
Старый 21.04.2020, 15:18
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Сообщение от Сергей Ракипов Посмотреть сообщение
почему когда я переменные выношу за функцию они не работаю, они же глобальными должны быть
Вынести можно только так
<script>
let percentage = document.querySelector(".percentage");
let percentageVal = document.querySelector("#percentage-value");
let fact = document.querySelector(".fact");

let updateScrollPercentage = function() {
    let heightOfWindow = window.innerHeight;
    let contentScrolled = window.pageYOffset;
    let bodyHeight = document.body.offsetHeight;
     
    if(bodyHeight - contentScrolled <= heightOfWindow) {
        percentageVal.textContent = percentage.style.height = "100%"
    }
    else {
        let total = bodyHeight - heightOfWindow;
        let got = contentScrolled;
        let percent = parseInt((got/total) * 100);
        percentageVal.textContent = percentage.style.height = percent + "%";
            if (percent>=20 && percent<=30){
                fact.style.display = "block";
            }
            else{
                fact.style.display = "none";
            }
    }
}
window.addEventListener('scroll', updateScrollPercentage)
</script>
Ответить с цитированием
  #23 (permalink)  
Старый 21.04.2020, 15:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Сергей Ракипов
и как этих фактов сделать появление плавным.
анимировать opacity меняя класс элемента вместо style.display
Ответить с цитированием
  #24 (permalink)  
Старый 21.04.2020, 15:25
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

Сообщение от voraa Посмотреть сообщение
Вынести можно только так
а почему так?

и у меня есть ощущение что это коряво когда в одной функции написано
if else с разными так сказать действиями одно отвечает за процент а втрое за ввод.
и как добавить плавности
Ответить с цитированием
  #25 (permalink)  
Старый 21.04.2020, 15:26
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

Сообщение от рони Посмотреть сообщение
анимировать opacity меняя класс элемента вместо style.display
это понятно, но я имел виду может какой способ есть в js
Ответить с цитированием
  #26 (permalink)  
Старый 21.04.2020, 15:59
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от Сергей Ракипов
Я пытаюсь понять
условия функции

берем высоту элемента вычитает проскороленые значение и если они меньше или равны видимой части окна то
из блока заменяем контент на ширину блока и присваивает 100 процентов
А зачем вам отдельно обрабатывать такой случай?

Для того, чтобы вычислить процент прокрутки у элемента, вам следует текущее значение прокрутки разделить на максимально возможное.

const progress = document.querySelector("progress");

function scrollHandler() {
	const p = document.body.scrollTop / (document.body.scrollHeight - document.body.clientHeight);
	progress.value = p;
}
addEventListener("load", scrollHandler);
document.body.addEventListener("scroll", scrollHandler);


Чтобы прокрутка у элемента заработала, вам следует указать размеры элемента (иначе прокрутка у элемента не будет, а только у корневого элемента)
html, body {
	height: 100%;
	overflow: auto;
	margin: 0;
}


Сообщение от рони
анимировать opacity меняя класс элемента вместо style.display
Зачем менять класс, разве сразу непрозрачность анимировать нельзя?

Сообщение от Сергей Ракипов
и как добавить плавности
transition

Исправленный пример — https://codepen.io/Malleys/pen/RwWowmd?editors=1000

Последний раз редактировалось Malleys, 21.04.2020 в 16:30.
Ответить с цитированием
  #27 (permalink)  
Старый 22.04.2020, 05:56
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

Сообщение от Malleys Посмотреть сообщение
Зачем менять класс, разве сразу непрозрачность анимировать нельзя?
Я понимаю что можно, просто я только учусь и хочу узнать есть ли возможность анимировать другими способами.
Ответить с цитированием
  #28 (permalink)  
Старый 09.05.2020, 16:31
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

А как прочитать эту запись
let scrollTop = window.pageYOffset ? window.pageYOffset : (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);


pageYOffset я понимаю что на сколько окно браузера было проскорелно
scrollTop на сколько элемент было проскролено.

но вот языком нормальным не могу сказать что значит эта запись
Ответить с цитированием
  #29 (permalink)  
Старый 09.05.2020, 16:43
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

function sticky(){

let scrollTop = window.pageYOffset ? window.pageYOffset : (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);

if(scrollTop >= 0 & scrollTop <= 220){
	imgArticle.style.position = "absolute";
	imgArticle.style.top = "220";
}
else if(scrollTop >= 220 & scrollTop <= 500){
	imgArticle.style.position = "fixed";
	imgArticle.style.top = "0";
}
else{
	imgArticle.style.position = "absolute";
	imgArticle.style.top = "280" + "px";
}
}

window.addEventListener("scroll", sticky);


Почему если я выношу эту переменную за функцию
let scrollTop = window.pageYOffset ? window.pageYOffset : (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);

то функция не работает
Ответить с цитированием
  #30 (permalink)  
Старый 09.05.2020, 17:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Сергей Ракипов
Почему если я выношу эту переменную за функцию
потому что переменная содержит значение, на момент её создания или внесения изменений.
изменений не вносилось, значит будет значение на момент создания.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавный скролл к div после клика, но уже на другой странице Quark_ Javascript под браузер 6 25.06.2015 09:46
FancyBox переопределяет вертикальный скролл ? ilyas-> Элементы интерфейса 14 08.11.2014 16:55
Динамическое отображение контента на 2ой странице, в зависимости от выбора на 1ой Volchen0ck Events/DOM/Window 2 14.05.2014 16:01
Скролл странице в Хроме к динамически вставляемому фрейму Deff Events/DOM/Window 6 02.09.2013 22:29
Js scrollpane, постоянно виден скролл, как убрать? metaller92 jQuery 0 17.07.2013 11:23