There is a problem with the section (located in the middle of the page, ie, there are the same blocks above / below). I want the moment when this section is visible on the screen, it has a fixed position. But if I scroll up / down 200px, then it becomes static again.

PS The problem is that if I make his position fixed, all the layout moves out.

Tried to make a fixed position using javascript, but the section starts to twitch.

const element = document.querySelector('.list-tools_ul'); let Visible = function (target) { // ВсС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ элСмСнта let targetPosition = { top: window.pageYOffset + target.getBoundingClientRect().top, left: window.pageXOffset + target.getBoundingClientRect().left, right: window.pageXOffset + target.getBoundingClientRect().right, bottom: window.pageYOffset + target.getBoundingClientRect().bottom }, // ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ ΠΎΠΊΠ½Π° windowPosition = { top: window.pageYOffset, left: window.pageXOffset, right: window.pageXOffset + document.documentElement.clientWidth, bottom: window.pageYOffset + document.documentElement.clientHeight }; if (targetPosition.bottom > windowPosition.top && // Если позиция Π½ΠΈΠΆΠ½Π΅ΠΉ части элСмСнта большС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ Ρ‡Π°ΠΉΡ‚ΠΈ ΠΎΠΊΠ½Π°, Ρ‚ΠΎ элСмСнт Π²ΠΈΠ΄Π΅Π½ свСрху targetPosition.top < windowPosition.bottom && // Если позиция Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части элСмСнта мСньшС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Π½ΠΈΠΆΠ½Π΅ΠΉ Ρ‡Π°ΠΉΡ‚ΠΈ ΠΎΠΊΠ½Π°, Ρ‚ΠΎ элСмСнт Π²ΠΈΠ΄Π΅Π½ снизу targetPosition.right > windowPosition.left && // Если позиция ΠΏΡ€Π°Π²ΠΎΠΉ стороны элСмСнта большС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Π»Π΅Π²ΠΎΠΉ части ΠΎΠΊΠ½Π°, Ρ‚ΠΎ элСмСнт Π²ΠΈΠ΄Π΅Π½ слСва targetPosition.left < windowPosition.right && (targetPosition.top+targetPosition.bottom)/2<=(windowPosition.top+windowPosition.bottom)/2) { // Если позиция Π»Π΅Π²ΠΎΠΉ стороны элСмСнта мСньшС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ ΠΏΡ€Π°Π²ΠΎΠΉ Ρ‡Π°ΠΉΡ‚ΠΈ ΠΎΠΊΠ½Π°, Ρ‚ΠΎ элСмСнт Π²ΠΈΠ΄Π΅Π½ справа // Если элСмСнт ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π²ΠΈΠ΄Π½ΠΎ, Ρ‚ΠΎ запускаСм ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ return true; } return false; }; // ЗапускаСм Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ страницы window.addEventListener('scroll', function() { let answer=Visible (element); if (answer){ window.addEventListener('scroll', onscrollFun); window.scroll(0,document.querySelector('.big-height-two').offsetTop);//фиксированноС ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ } }); function onscrollFun(e) { let top = window.pageYOffset; let copyThisLength; if (lastScrollTop > top) { console.log('top'); } else if (lastScrollTop < top) { itemsCount--; copyThisLength=-1; if (itemsCount >= 0) { copyThisLength = itemsCount; content[copyThisLength].style.opacity = 1; } while (copyThisLength < content.length - 1) { content[copyThisLength+1].style.top = `${parseInt(content[copyThisLength+1].style.top) + 8}%`; content[copyThisLength+1].style.fontSize=`${parseInt(getComputedStyle(content[copyThisLength+1]).fontSize)-4}px`; if (100-parseInt(content[copyThisLength+1].style.top)<30){ content[copyThisLength+1].style.opacity -= .3; } copyThisLength++; } } lastScrollTop = top; e.preventDefault(); }
  • I didn’t understand the task very well, but in order for the blocks not to jump, you can add margins to the height of the block below the unit or add an empty block. - Ruslan Semenov

1 answer 1

Try instead of forced scrolling with a script to make the necessary block offset using a change (with the same script) css-properties:

 {transform:translateY(Npx);}

where N is the number of pixels the scrolling container has left