CSS - ako meniť veľkosť divu v závislosti od scrollingu?

Možná by stačilo to provést na způsob :
(popřípadě dekuji za opraveni, přidat do každého divu který ma byt afektován)

function isInSection(section)
    {
        var top = $(window).scrollTop();
        var bottom = top + $(window).height();
         var elementTop = $(section).offset().top;
         var elementBottom = elementTop + $(section).height();
           return (bottom >= elementTop && top <= elementBottom);
   }
    if( isInSection($('#section')) ) /* kupříkladu změna barvy při scrool
 {
            $('.moje_div).css('color', '#000000');
        }

Tato funkce by té mohla zajímat : SCrool /JQuery

ďakujem, pozriem, vyskúšam.

přidat do každého divu který ma byt afektován

nestačí to použiť ako globální script a nadefinovať pre ktorý element sa executne?

Neodpověděl bych ti nic víc co bych šel najít po položení otázky na web protože opravdu nevím je mi lito, víc než nějaký malíčky domácí zaklad Webového jazyku neumím a neznám, protože ti nikdo 30minut neodpověděl, tak jsem jen přispěl než ti odpoví někdo mezi tím
(Ale jestli si s tim .scroll() 'sam' pohraješ a zkusíš něco vymyslet uvidíš ze na něco určíte dojdeš )

ok, stále to reším a nejde to tak jak bych to potreboval. Zatím som sa len kus k tomu priblížil:

/*        function resize() {
                    $('#nav#vertical, aside').height($(document).height() + $(shift).height());
                } */
        /*        function resize() {
                    var el = $("nav#vertical, aside");
                    el.height($(document).height() - el.offset().top);
                } */

viem druhá časť je blbosť. Ešte som videl jedno riešenie ale nevhodné pre moju potrebu (i když dosť podobnú funkčnosť):

$('#header_parent').stop().animate({height: "100px"},0);

Problém je že toto nieje "plynulý" a priamo závislý na scrollingu. Scrollingom sa zavolá ale zvätšovanie sa už nekoná podľa pozície scrollu v scrollbare. Potrebujem "plynulé" riešenie priamo závyslé na scrollingu. Presne o koľko px prescrollujem toľko sa pričíta pixelov ku height k jeho pôvodnej hodnote definovanej v CSS.

Najbližšie som sa dostal k tomuto:

function resize() {
            var el = $('nav#vertical, aside');
            var scrollTop = $(this).scrollTop();
            el.height(el.height + (scrollTop || shift));
        };

moja vlastná spatlanina, ale nefunkčná.

Ani

function resize() {
            var el = $('nav#vertical, aside');
            var scrollTop = $(this).scrollTop();
            el.height(el.height() + (scrollTop || shift));
        };

nefunguje. ale myslím že som blízko.

A ani toto nefunguje:

function resize() {
            var el = $('nav#vertical, aside');
            el.height($(el.height() + ($(this).scrollTop() || shift)));
        };

(viem že je to napsané chaoticky, sry)

+ ešte pred pár dňami som ešte jednu spatlaninu vyskúšal, tiež nefunkčná:

$(window).scroll(function(){
     if (shift > 100) {
         $('nav#vertical, aside').css({
             'height': height
         });
     }
     else {
         height = 'height' - shift;
    }
     $('nav#verical, aside').css({
         'height': height + "px"
     })
 });

dnes som sa zas kus s tým pohrál, a už som sa k tomu priblížil:

https://github.com/Mlocik97/web-dev/blob/test2Anch or/anchor.js

$(document).ready(function () {
            var contentHeight = $('nav#vertical, aside').height();

            $(window).scroll(function () {
                var scrollTop = $(this).scrollTop();
                $('nav#vertical, aside').height(contentHeight + (shift || scrollTop));
            })
        })

EDIT:

$(document).ready(function () {
            var el = $('nav#vertical, aside');
            var elHeight = el.height();
            $(window).scroll(function () {
                var scrollTop = $(this).scrollTop();
                el.height(elHeight + scrollTop);
            });
        });

Tak toto funguje presne tak ako potrebujem, plne funkčné.