問(wèn)題描述

1，https://www.kayak.com.hk/holi...主要效果就是這個(gè)網(wǎng)站的效果。

當(dāng)滑動(dòng)滾動(dòng)條的時(shí)候，右邊的p會(huì)向下滾動(dòng)，這時(shí)候左邊的p也會(huì)跟著滾動(dòng)。但是由于左邊的p太長(zhǎng)，所以要隱藏最上面的一部分，這個(gè)效果實(shí)現(xiàn)。當(dāng)向上滾動(dòng)的時(shí)候，要隱藏左邊p的下面的部分，主要就卡在這邊了。試過(guò)一個(gè)方法， 就是判斷前后滾動(dòng)條的位置來(lái)顯示，效果可以，但是出現(xiàn)頁(yè)面卡頓，應(yīng)該是多次進(jìn)行前后滾動(dòng)條的判斷導(dǎo)致的。。下面是代碼：

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'}); }}

求大神解釋。。卡一天了。。。。。隨時(shí)在線，不理解我可以詳細(xì)解釋。。謝謝大家了

問(wèn)題解答

頁(yè)面卡頓可否考慮函數(shù)節(jié)流？

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'}); }}回答2：

我感覺(jué)是不是可以考慮監(jiān)聽(tīng)window的scroll事件 如果scrollTop達(dá)到一定的高度就給左邊p一個(gè)fixed定位 小于這個(gè)高度就取消fixed

嘗試用 translate 代替設(shè)置 top 并且包在 requestAnimationframe 里，看能不能解決卡頓。

已經(jīng)解決

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()<top){var downIframe=0;$('#SearchPackageLeftp').css({'position': 'relative','bottom':downIframe}); }}else{ $('#SearchPackageLeftp').removeClass('scrollstyle');} beforeScroll=afterScroll;},0) }});}else{$('#SearchPackageLeftp').css({'position': 'relative','bottom': '0px'}); }}