Всем спасибо разобрался
вот что я хотел
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>index</title>
<link rel="shortcut icon" href="img/favicon.ico">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="index">
<meta name="Keywords" content="index">
<style>
*{
margin: 0;
padding: 0;
}
body{
font-family: Verdana, Geneva CY, Helvetica, DejaVu Sans, Arial, sans-serif;
font-size: .8rem;
line-height: 160%;
}
main{
max-width: 480px;
margin: 0 auto;
}
.fact{
color: #fff;
font-size: .6rem;
font-style: italic;
position: fixed;
top: 50%;
left: 10px;
line-height: -2rem;
background-color:lightsalmon;
padding: 20px;
display: none;
}
#scroll-percentage {
position: fixed;
top: 0;
left: 0;
height: 100vh;
color: #000;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
z-index: 2;
}
#scroll-percentage .percentage {
display: inline-block;
background-color:#ff530d;
border-right: 4px solid burlywood;
height: 0;
width: 4px;
box-sizing: content-box;
}
#percentage-value {
box-sizing: content-box;
position: fixed;
bottom: 20px;
left: 20px;
height: 30px;
width: 30px;
color: #fff;
background-color: burlywood;
text-align: center;
line-height: 30px;
border: 1px solid burlywood;
z-index: 2;
}
</style>
</head>
<body>
<div id="scroll-percentage">
<div class="percentage"></div>
</div>
<div id="percentage-value">0%</div>
<div class="fact">
1949 Раймондо Бухер 30 метров
</div>
<main>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, exercitationem est blanditiis aliquam ullam incidunt, saepe fugit laboriosam, voluptatum architecto reprehenderit mollitia magni qui! Magnam nobis quas aliquid tenetur incidunt dignissimos accusantium ex impedit dicta voluptatem culpa, deserunt ducimus corporis quis debitis, vitae iusto enim dolorum numquam error ea ipsum dolore. Fuga voluptates quos corporis accusantium qui beatae, repellendus, saepe assumenda recusandae voluptatem maiores eum! Sequi temporibus voluptatibus animi facilis quos aliquid, velit vel eos molestias impedit ullam officiis obcaecati excepturi nesciunt ipsa laudantium perferendis, consequatur provident? Accusantium dolor numquam, aut optio, fugiat debitis accusamus voluptatum sed. Saepe possimus dolore qui nemo libero rerum iusto debitis facilis voluptas exercitationem deserunt eum corrupti quos aut officia, adipisci, rem sunt dolores, nulla recusandae cum temporibus ipsum? Eius modi voluptatum libero dicta, ipsa natus, facilis, nulla maxime reiciendis sapiente nobis magnam magni quasi voluptate debitis nemo ipsum recusandae alias vel peut quos officia nulla! Maxime repellendus dolore eum consectetur, alias repudiandae soluta nam culpa fuga ipsam cumque reiciendis minus saepe quae veritatis voluptate? Cumque debitis perferendis aut. Natus reiciendis dolorem cupiditate ipsam labore ipsa voluptates, assumenda dicta deserunt culpa ad vitae, corrupti saepe officiis, omnis doloremque quidem eaque quisquam! Libero facere voluptatem velit quas earum neque sapiente maxime quaerat perferendis itaque officia dolores, architecto aliquid, numquam eaque nemo quisquam obcaecati repudiandae. Aspernatur asperiores sint soluta illum aliquid, consectetur, similique. Deserunt possimus reiciendis eveniet inventore. Ea odit fugit delectus optio voluptatum enim laudantium facilis odio inventore fuga dolorum ratione aut, rerum molestias eveniet officiis, voluptatem incidunt, at repudiandae dicta quis ex commodi ducimus error sequi? Sapiente neque maxime officiis exercitationem possimus non culpa corporis, deserunt unde. Maiores qui deserunt, numquam neque illo maxime quasi porro iure eius veniam voluptate fugiat nulla, tempore mollitia culpa velit. Vitae maiores sit ipsa asperiores consequatur veritatis odio quae eligendi, doloremque quo. Enim similique tempora iure a cupiditate minus voluptatum ex, minima voluptatibus velit, magnam inventore possimus, adipisci architecto, soluta expedita eligendi totam illum rerum. Eum accusamus cumque officia, pariatur, et tenetur totam veritatis reprehenderit facere assumenda distinctio, odit provident corporis saepe repudiandae atque commodi quis rerum expedita blanditiis ratione ex. Accusantium consequatur ipsam laboriosam quasi consectetur neque odio voluptatem quaerat rerum culpa est suscipit autem, praesentium repudiandae veritatis eius veniam commodi aliquam magnam possimus libero sapiente sit non excepturi. Eum sed assumenda voluptatum dolore ullam, ratione adipisci. Quibusdam praesentium veniam, asperiores id, unde eaque beatae delectus. Sint pariatur adipisci voluptas aliquam reprehenderit modi animi, cupiditate laboriosam, dolorem magni veritatis doloribus deleniti voluptate vel neque optio. Deleniti ipsum autem quas ex natus obcaecati ipsa iure! Aut a, ea quia natus placeat odio est, blanditiis culpa! Necessitatibus minima molestiae sint, reiciendis dignissimos quos, quaerat adipisci ea iusto dolorum, assumenda nisi ducimus nemo placeat quam accusamus possimus itaque sed ad provident. Perferendis quasi voluptates non inventore porro placeat alias odit delectus at voluptatibus deleniti, illum iure velit, eligendi est asperiores saepe quibusdam expedita dolores rem enim quod maiores nostrum. Dicta earum, voluptates numquam similique dolorem necessitatibus repudiandae ab praesentium at eum voluptatem hic accusantium quos officia, enim, maiores obcaecati neque sunt animi quis dolores commodi? Reprehenderit error vero quam incidunt quasi ducimus voluptatum enim doloribus eaque illo modi non maiores, illum neque iusto, totam saepe necessitatibus inventore aut? Magnam, ut quisquam neque eaque sequi rerum omnis aliquid, minus ab quas nihil tempora vel harum debitis quidem praesentium, voluptates dolorum laudantium libero. Voluptatibus cupiditate consequuntur, quaerat molestiae doloremque ex est fuga officia nostrum, quam commodi assumenda ad ea nemo vel iusto fugit molestias facilis. Obcaecati iusto libero expedita consequatur facere odio. Sit quas repellat facere aut voluptas amet voluptate, vitae quae necessitatibus reiciendis consequuntur laboriosam nam cum debitis culpa sint dignissimos autem unde porro doloribus! Sint assumenda sequi doloremque recusandae, rem iure quae nesciunt dolorem voluptates ut earum dolores, iste beatae quaerat possimus accusantium quam ea. Perspiciatis magnam tempora aperiam, quisquam necessitatibus beatae nesciunt laborum maxime odio fuga id nam similique, corrupti iste quis quidem illum atque sit tenetur ipsa eligendi laudantium. Quisquam minus ut, cum sapiente, architecto, animi veniam omnis dolore, perspiciatis asperiores voluptate magni veritatis ad sunt molestias adipisci provident fugiat id quae fugit velit aliquid repudiandae quam? Harum velit minima ullam neque quidem. Ad beatae, similique quae repellat suscipit nam fugit molestias unde nesciunt voluptas accusantium, labore iure enim atque omnis, architecto error porro cupiditate reiciendis rem vitae! Amet quidem, blanditiis eaque. Eligendi rem alias eos esse aliquid, debitis dignissimos illum, odit voluptas ea officia. Laboriosam fugiat velit, debitis incidunt cum, nam culpa esse dicta, totam necessitatibus assumenda aspernatur quaerat hic illum consectetur sit recusandae obcaecati amet commodi sequi repudiandae earum tenetur ad nobis aliquam. In, cupiditate, officiis! Deserunt hic temporibus in, perspiciatis dolorem similique quisquam aut minima obcaecati cupiditate dicta officiis omnis. Cupiditate nemo inventore nobis mollitia dolor voluptatem quam voluptas unde voluptates qui excepturi eius debitis modi quidem, non optio quas esse fugit minus porro ad quis quia incidunt veniam! Animi inventore consequuntur pariatur id molestiae illum est reiciendis dolores nemo? Voluptate tempora ducimus eos incidunt? Illum, veniam, rerum a reprehenderit aperiam repellendus ducimus minima expedita odit saepe amet alias temporibus, possimus quas cupiditate nam consequatur repudiandae ut optio asperiores modi aliquid accusamus quam! Quaerat rem aspernatur suscipit.
</main>
<script>
let updateScrollPercentage = function() {
let heightOfWindow = window.innerHeight;
let contentScrolled = window.pageYOffset;
let bodyHeight = document.body.offsetHeight;
let percentage = document.querySelector(".percentage");
let percentageVal = document.querySelector("#percentage-value");
let fact = document.querySelector(".fact");
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>
</body>
</html>
У меня вопросы есть ощущение кто как то не по людский написано.
почему когда я переменные выношу за функцию они не работаю, они же глобальными должны быть
И как записать когда будет .fact не один (конечно они будет с id)
что бы проще и красивее
и как этих фактов сделать появление плавным.