滚动到顶部并返回的Javascript

时间:2019-05-06 09:00:20

标签: javascript scroll

我有一个功能,可以让容器在滚动100px时跳到顶部,并在再次滚动到顶部时跳回原位。我正在努力在较小的设备上禁用此功能,但是我使用的代码也破坏了行为。

 $(window).scroll(function() {`
//After scrolling 100px from the top...
if ( $(window).scrollTop() >= 72 || w > 920 ) {
    $('#container').css('top', '0px');

//Otherwise remove inline styles and thereby revert to original stying
} else {
    $('#container').attr('style', '');

}
});

更新:当您再次滚动到顶部时,此代码实际上应该使容器跳到先前的位置。问题出在“ w> 920”。我需要禁用较小设备上的行为,但这也会破坏功能。我猜是因为有“ AND”语句。窗口宽度保持不变,因为恢复中断。

不工作的小提琴

https://jsfiddle.net/xm1yq4to/

工作小提琴

https://jsfiddle.net/s15g7nup/

还有另一种方法可以为此指定设备宽度吗?

1 个答案:

答案 0 :(得分:0)

我最终以另一种方式进行了操作,即不检查设备而是更改类

$(document).ready(function() {
// run test on initial page load
checkSize();

// run test on resize of the window
$(window).resize(checkSize);
 });

//Function to the css rule
function checkSize(){
  if ($(".desktop-menu").css("display") == "block" ){
    $(window).scroll(function() {
      //After scrolling 100px from the top...
      if ( $(window).scrollTop() >= 100 ) {
        $('#container').css('top', '0px');
      } 
      //Otherwise remove inline styles and thereby revert to original stying
      else {
        $('#container').attr('style', '');
      }
    });
  }
return false;
};