javascript - scroll scrolling issue-PHP Chinese Network Q&A

1, https://www.kayak.com.hk/holi... The main effect is the effect of this website.

When sliding the scroll bar, the p on the right will scroll down, and the p on the left will also scroll accordingly. But since the p on the left is too long, the top part needs to be hidden, and this effect is achieved.
When scrolling up, you need to hide the lower part of the p on the left, which is mainly stuck here. I have tried a method, which is to judge the position of the front and rear scroll bars for display. The effect is OK, but the page is stuck, which should be caused by judging the front and rear scroll bars multiple times. . Here is the code:

if($(window).height() > 550){

var top = 240; if($(document).scrollTop() > top){ var beforeScroll=$(document).scrollTop(); var topIframe = -180; $("#SearchPackageLeftp").css({"position": "fixed","top": topIframe}); $(window).scroll(function(){ var afterScroll=$(document).scrollTop(); var result=afterScroll-beforeScroll; if(result<0){ var downIframe=10; $("#SearchPackageLeftp").css({"position": "fixed","top":downIframe}); } beforeScroll=afterScroll; }); }else{ $("#SearchPackageLeftp").css({"position": "relative","top": "0px"}); } }

Please explain. . Been stuck for a day. . . . . Be online at any time, if you don’t understand I can explain it in detail. . Thank you everyone

if($(window).height() > 550){ var top = 240, timer = 0; if($(document).scrollTop() > top){ var beforeScroll=$(document).scrollTop(); var topIframe = -180; $("#SearchPackageLeftp").css({"position": "fixed","top": topIframe}); $(window).scroll(function(){ if (timer === 0) { timer = setTimeout(function() { timer = 0; var afterScroll=$(document).scrollTop(); var result=afterScroll-beforeScroll; if(result<0){ var downIframe=10; $("#SearchPackageLeftp").css({"position": "fixed","top":downIframe}); } beforeScroll=afterScroll; }, 500) } }); }else{ $("#SearchPackageLeftp").css({"position": "relative","top": "0px"}); } }

function scrollHeight(topIframe){ var top = 240; var timer=0; if($(document).scrollTop() > top){ var beforeScroll=$(document).scrollTop(); $("#SearchPackageLeftp").css({"position": "fixed","bottom": topIframe}); $("#SearchPackageLeftp").css("top",""); $(window).scroll(function(){ if(timer===0){ timer=setTimeout(function() { timer=0; var afterScroll=$(document).scrollTop(); var result=afterScroll-beforeScroll; if(result<0){ $("#SearchPackageLeftp").addClass("scrollstyle"); if($(document).scrollTop()

reply all (4)

小葫芦2017-06-26 10:57:45 4 floor

If the page is stuck, can we consider function throttling?

Like+0

Add Reply

Ty802017-06-26 10:57:45 3 floor

I feel like you can consider monitoring the scroll event of the window. If the scrollTop reaches a certain height, give the left p a fixed position. If it is less than this height, cancel the fixed position

習慣沉默2017-06-26 10:57:45 2 floor

Try to use translate instead of setting top and wrap it in requestAnimationframe to see if it can solve the problem.

伊谢尔伦2017-06-26 10:57:45 1 floor

Already solved