There are 2 divas:

  • one wide 0%
  • another in height 2000+ px

You need to synchronize them, as you scroll the second diva

 $(window).scroll(function () { if (window.pageYOffset >= $('.article').offset().top) { } })

There is a check for the entry, as I continue to synchronize the percentage of the width of the first diva with the height and the current scrolling of the second

  • I came here to help, but not rebuses to solve ... Explain clearly what you wish for - Oleksandr
  • there are 2 divas, one in width 0% of the other in height 2000+ px I need to synchronize them as the second diva scrolls $ (window) .scroll (function () {if (window.pageYOffset> = $ ('. article')). offset (). top) {}}) Checking for the entry is, how can I synchronize the percentage of the width of the first diva with the height and the current scrolling of the second - MoJlo4HuK
  • @ MoJlo4HuK this should be written in the question itself, not in the comments to it. How to ask questions - Sublihim
  • @Sublihim it was a clarification, not the question itself - MoJlo4HuK
  • @ MoJlo4HuK minimum reproducible example - Sublihim

1 answer 1

It is not clear described, but I suppose that something like this:

 $(document).on('scroll', onScroll); function onScroll() { var width, scroll = $(window).scrollTop(), firstBlock = $('.block-1'), secondBlock = $('.block-2'), secondBlockHeight = secondBlock.innerHeight(), secondBlockTop = secondBlock.offset().top; if(scroll >= secondBlockTop){ width = (scroll - secondBlockTop) / secondBlockHeight * 100; } else if (scroll < secondBlockTop){ width = 0; } else if(scroll >= secondBlockTop + secondBlockHeight) { width = 100; } firstBlock.css({ width: width + '%' }); } 
 .block-1 { position: fixed; left: 0; top: 0; width: 0; height: 100px; background-color: red } .block-2 { float: right; width: 100px; height: 2000px; margin: 100px 0; background-color: green; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="block-1"></div> <div class="block-2"></div>

  • Well, either for mimification lovers you can remove the conditions, leave only: width = (scroll - secondBlockTop) / secondBlockHeight * 100; and the style is applied like this: firstBlock.css ({width: width <0? 0: (width> 100? 100: width) + '%'}); - MedvedevDev