<header>
  <h1>Pencere yüksekliği: <span></span></h1>
</header>
<main>
  <article>
    <div class="tamgenislik">
      <h2>Gösterilen "Pencere Yüksekliği" sayfanın ilk açıldığı andaki tarayıcı penceresinin yüksekliğini gösterir, bu yükseklik kadar aşağı kaydırılınca <span style="background:green;color:white;padding:0 5px;">arka planı yeşil</span> olur.</h2>
      <h2>Eğer pencerenin boyutunu değiştirirseniz soldaki gösterge değişmez ancak fonksiyonda <code>wH</code> değişir[<code>on("resize", function ()</code>].</h2>
      <p><strong>Kod:</strong>
      <pre><code>$(document).ready(function () {
  var $w = $(window),
    wH = $w.height();
  $w.on("scroll", function (l) {
    $(this).scrollTop() > wH
      ? $("html").addClass("scroll")
      : $("html").removeClass("scroll");
  }).on("resize", function () {
    wH = $(this).height();
  });
});</code></pre>
      </p>
      <p>
        <small>Olabildiğince kısaltılmış olan bu kod görüldüğü üzere tam 1 pencere yüksekliği kadar scroll edildiğinde html class="scroll" ekliyor.</small>
      </p>

    </div>
    <hr />

    <h3>Lorem Ipsum</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut finibus ac dui nec venenatis. Cras dictum odio ac porttitor finibus. Cras quis sem erat. Suspendisse potenti. Fusce pharetra mattis suscipit. Suspendisse viverra mauris vitae eros ultricies, sit amet volutpat leo facilisis. Proin nec porttitor risus. Nam in metus fermentum, commodo augue at, elementum neque. Proin eleifend rutrum ex id porta. Praesent aliquam leo vitae euismod lacinia. Phasellus et arcu in mauris congue tincidunt nec in enim.
    </p>
    <p>
      Fusce lacinia eget dolor non congue. Cras hendrerit, dolor dapibus tristique consequat, tortor lorem ornare nibh, in pharetra mi neque in dui. Nulla sit amet fermentum sem, et euismod augue. Ut finibus, erat sit amet euismod porta, nunc ligula consequat ante, sed eleifend enim magna at nulla. Nam ut quam nec leo ultrices aliquet a sed elit. Ut venenatis nisl ut dictum aliquet. Suspendisse lobortis sodales purus, et imperdiet odio dignissim ac. Nam placerat scelerisque diam vitae fringilla. Nam sit amet enim purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam semper in massa quis faucibus. Aenean nec cursus enim. Praesent eleifend tincidunt odio. Vivamus vehicula facilisis pretium.
    </p>
    <p>
      Proin ac ipsum porta, dapibus diam ac, pharetra nisl. Morbi euismod est nisi, in condimentum lacus commodo eu. Suspendisse sed nunc in risus pellentesque maximus ac eget nunc. Cras interdum, risus id convallis consectetur, lorem massa cursus justo, in venenatis dui nisi id eros. Nullam ut condimentum neque. Donec vitae aliquet nunc, sit amet scelerisque leo. Donec justo augue, pellentesque eget nulla sed, luctus ornare neque. Etiam sit amet purus dapibus, placerat diam et, consequat ipsum. Vestibulum nec egestas erat.
    </p>
    <p>
      Mauris sodales condimentum arcu, at ornare libero vehicula in. Nam sit amet massa ultrices, aliquet orci vitae, fermentum urna. Donec congue malesuada nunc, in ornare libero posuere vel. Aenean posuere tristique turpis quis venenatis. Sed ac venenatis tortor. Nullam ullamcorper gravida elit in vulputate. Quisque tempor blandit mollis.
    </p>
    <p>
      Nulla scelerisque eget nisi efficitur interdum. Nunc ut suscipit nisl. Phasellus sed erat diam. Curabitur ullamcorper, nisi ac scelerisque varius, purus leo lobortis lorem, ut tincidunt ex lacus a arcu. In hac habitasse platea dictumst. Donec vel ex condimentum, pretium diam ut, porttitor purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent orci mi, viverra vitae massa in, congue convallis sem. Praesent pretium scelerisque orci a ultrices. Proin sit amet mi massa. Etiam feugiat ipsum sit amet elementum aliquet.
    </p>
    <p>
      Nulla quis tortor egestas, gravida nibh sit amet, laoreet elit. Nunc sem urna, tincidunt vel lectus commodo, pulvinar sollicitudin dui. Aenean pellentesque sodales pretium. Integer a laoreet tortor. Fusce blandit ligula rutrum vestibulum molestie. Maecenas venenatis ut eros sit amet sagittis. Sed in lacus sed neque condimentum posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam diam nunc, iaculis quis placerat ac, faucibus at tellus. Quisque molestie dapibus lectus, quis commodo sem sagittis eu. Pellentesque sollicitudin tincidunt tempor. Donec tristique, nibh quis semper finibus, nibh lorem finibus arcu, vitae viverra nibh ipsum et risus.
    </p>
    <p>
      Aliquam erat volutpat. Duis maximus nunc tempor dolor aliquam, at bibendum justo porta. Aenean quam leo, ultrices eget nulla at, faucibus feugiat nisi. Quisque nec consequat massa. Donec et est in augue sagittis hendrerit nec rhoncus leo. Sed in ligula aliquet augue congue fringilla in a mi. Proin ac nisi sed lacus volutpat tincidunt. Nullam et turpis et urna vehicula iaculis. Quisque interdum magna elit, eget facilisis lectus tempus sed. Proin varius ut risus ut pharetra. Etiam dapibus dictum sem, vel tempus est semper nec.
    </p>
    <p>
      Nunc sodales aliquam arcu vitae efficitur. Ut iaculis lectus sapien, pharetra gravida magna finibus sit amet. Vestibulum interdum egestas nunc ac eleifend. Aenean leo leo, tempus et tincidunt sit amet, vulputate sed elit. Phasellus vestibulum congue nunc in gravida. Nulla facilisi. Ut tincidunt commodo vehicula. Curabitur vestibulum sodales mi iaculis sollicitudin.
    </p>
    <p>
      Nam luctus sit amet erat ac dapibus. Fusce nec risus eu eros accumsan interdum ut at metus. Curabitur gravida mi ac risus condimentum varius. Sed sagittis metus vitae purus dictum, sit amet facilisis ante posuere. Mauris nec rhoncus nisi. Donec porta justo sem, et eleifend velit rhoncus in. Sed id sapien ut dolor dapibus scelerisque in a diam.
    </p>
    <p>
      Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut faucibus a sem eu accumsan. Cras ultricies vestibulum tempus. Quisque egestas mauris et eleifend ultrices. Phasellus augue est, finibus vitae congue ac, mollis eget erat. Quisque diam ligula, tincidunt et faucibus sed, tempus vel lectus. Donec a felis egestas, commodo sem vel, suscipit mi. Donec aliquet gravida magna maximus luctus.
    </p>
    <p>
      Nunc aliquet nisi ex, non imperdiet urna interdum id. Duis non aliquam velit. Quisque aliquet porta cursus. Sed dignissim urna in justo varius gravida. Praesent rutrum, sem non suscipit vulputate, arcu justo lacinia leo, sit amet consequat nibh nulla vel urna. Donec vestibulum ornare ipsum a aliquet. Nullam pellentesque nulla at porta rhoncus. Morbi a varius augue. Quisque sed justo tellus. Mauris commodo lacinia nulla. Nam leo enim, ullamcorper ut blandit at, elementum at nibh. Vestibulum blandit ornare posuere. Donec in augue eget diam ultrices vestibulum sed vitae magna. Pellentesque tempus sem consequat, sollicitudin lacus sit amet, vulputate nunc.
    </p>
    <p>
      Donec maximus leo lacus, sed scelerisque augue placerat et. Maecenas ex ante, aliquam in pulvinar et, scelerisque ut ex. Proin a risus nec urna cursus dapibus. Aenean sit amet ipsum sem. Aenean imperdiet neque vel lobortis luctus. Suspendisse rutrum nibh ut dolor imperdiet imperdiet. Aliquam erat volutpat. Fusce posuere arcu magna, ut fermentum erat fringilla eget. In fermentum condimentum venenatis. Integer ac suscipit nulla. Ut vel pellentesque nisl. Suspendisse vel massa ante. Nam placerat consequat gravida.
    </p>
    <p>
      Aliquam erat volutpat. Ut euismod justo massa, id dictum tellus fringilla eget. Etiam iaculis luctus nisi, sed luctus sapien porta et. Praesent faucibus turpis pretium massa tristique, sed rutrum diam mattis. Vivamus tempor pulvinar diam id ornare. Mauris facilisis ullamcorper tortor, at sodales massa. In hac habitasse platea dictumst. Vivamus odio libero, dictum at tellus eu, tempor porttitor ex. Proin gravida nulla urna, vitae pulvinar quam suscipit non. Nullam diam leo, gravida at ante at, maximus viverra lacus.
    </p>
    <p>
      Mauris egestas purus nec nisi fermentum, id molestie sem tincidunt. Vivamus tincidunt tempus sagittis. Phasellus scelerisque congue fermentum. Suspendisse congue accumsan dignissim. Nulla id mauris feugiat, dictum elit in, ultricies felis. Nam et enim vitae neque mattis luctus sed eget quam. Nulla facilisi. Cras nec enim vulputate, consectetur turpis sed, malesuada enim. Sed ut leo vitae sapien hendrerit aliquet. Etiam mattis justo a ipsum pretium, in convallis magna efficitur. Aenean condimentum erat eget mauris scelerisque rhoncus non sit amet urna. Aenean pharetra felis felis, volutpat pretium magna gravida ut. Aenean porta neque eu tortor pharetra, id bibendum arcu semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In bibendum varius augue vel congue.
    </p>
    <p>
      Duis id quam in mauris facilisis facilisis. Donec maximus rhoncus ligula sed dictum. Vestibulum fringilla gravida velit. Vestibulum rutrum finibus ex. Aenean pulvinar neque vel dignissim aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean aliquet nunc erat, a cursus ex rutrum sit amet. Mauris sit amet tortor mattis tortor ullamcorper fermentum. Mauris a gravida diam. Mauris consequat arcu est, at pretium lacus semper eget. Donec ut tellus volutpat, maximus diam vel, tristique lacus.</p>
  </article>

</main>
<footer>
  <a href="https://volkanyilmaz.com.tr/">Volkan Yılmaz</a>
</footer>
article {
  width: 29rem;
  margin: auto;
}
header,
main {
  margin: 0;
  padding: 0;
}
footer {
  padding: 3rem 0;
}
.tamgenislik {
  min-height: 100vh;
}
h2 {
  background: lightyellow;
  padding: 1rem;
  margin: 0.5rem 0;
  font-size: 1.3rem;
}
pre {
  padding: 0 1rem 1rem;
}
code {
  font-size: small;
}
hr {
  margin: 10rem auto;
}
a {
  color: currentColor;
  margin: auto;
  text-align: center;
  display: block;
}
h1 {
  position: fixed;
  top: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
  font-size: 1.3rem;
}
h1 span {
  display: block;
  color: green;
}
.scroll h1 {
  background: green;
}
.scroll h1 span {
  color: white;
}
.scroll h1:after {
  content: "kaydirildi";
  font-size: x-small;
  font-weight: normal;
  color: white;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}
@media (max-width: 900px) {
  main {
    margin-top: 5rem;
  }
  h1 {
    background: #fff;
    width: 100%;
    margin: 0;
    padding: 1rem 0;
  }
}
$(document).ready(function () {
  var $w = $(window),
    wH = $w.height();
  $w.on("scroll", function (l) {
    $(this).scrollTop() > wH
      ? $("html").addClass("scroll")
      : $("html").removeClass("scroll");
  }).on("resize", function () {
    wH = $(this).height();
  });

  $("h1 span").append(wH+'<em>px</em>');
});
Run Pen

External CSS

  1. https://codepen.io/wolkanca/pen/wvgOPWb.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
  2. https://codepen.io/wolkanca/pen/wvgOPWb.js