How to resize a block on scrolling?

  • 0
    How is it possible to resize the block while scrolling? Those. when scrolling, resize the block (reduce its content by 1.3 times) permanently to the end of the page, and return to the previous size when returning to the top of the page?
    JavaScript Charles Yang, Aug 29, 2019

  • 2 Answers
  • 0
    let width = 100;
    document.onmousewheel = ({deltaY}) => {
    deltaY > 0 ? width-- : width++;
    previouslySelectedElement.style.width = width + 'px';
    }
    Anonymous

  • 0
    $(window).scroll(function(){
    if ($(window).scrollTop() > 100){
    $('.block').addClass('scroll');
    } else {
    $('.block').removeClass('scroll');
    }
    });


    styles

    .block {
    /* какие-то стили */
    }

    .block.scroll {
    /* дополнительные стили, которые уменьшают блок */
    }


    if for example this is a header, then the styles can be something like this

    .header {
    padding: 20px 0;
    transition: padding 0.25s;
    }

    .header.scroll {
    padding: 10px 0;
    }
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!