Question

我有以下代码在我的网站上为菜单设置动画，但我只想让它在小于800像素的屏幕上生效。我希望它能够从屏幕底部隐藏

头部

<script>
var didScroll;

$(window).scroll(function(event) { didScroll = true; });
setInterval(function() {
if (didScroll) {
  $('#BN-nav').removeClass('BN-nav-show').addClass('BN-nav-hide');
  didScroll = false;
}else{
  $('#BN-nav').removeClass('BN-nav-hide').addClass('BN-nav-show');
}
}, 400);
</script>

HTML

<nav id="BN-nav" class="row BN-nav-show ">  ...  </nav>

CSS

  #B-navN {
  position: fixed;
  bottom: 0; left: 0;
  z-index: 999;
  width: 100%; min-height: 75px;
  background-color: #fff;
  }

  #s-nav.BN-nav-hide { bottom: -75px; }

Answer 1

我建议尝试使用此代码。

＆＃13;

var lastPos=0;
$(window).scroll(function(event) {
	if (window.innerWidth < 800) {
			$('#nav-BN').addClass('BN-nav-hide').removeClass('BN-nav-show');
	
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
			$('#nav-BN').addClass('BN-nav-show').removeClass('BN-nav-hide');
    }, 1000));
	}
});

＆＃13;

#nav-BN {
  position: fixed;
  bottom: 0; left: 0;
  z-index: 999;
  width: 100%; min-height: 75px;
  background-color: #fff;
  bottom:-30px;
	transition:0.2s ease all;
  }

  #nav-BN.BN-nav-hide { bottom: -75px; }
  #nav-BN.BN-nav-show { bottom: 0px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav-BN" class="row BN-nav-show ">  NAV GOES HERE  </nav>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

＆＃13;

您的原始代码存在相当多的问题，最大的问题可能是尝试使用＆＃34; nav-BN＆＃34;向导航添加类。 ID，您尝试使用查找$('BN-nav')的{{1}}（您应该使用`$（＆＃39;＃nav-BN＆＃39;）。

详细了解jQuery选择器here。

编辑：当用户停止滚动时，根据重新显示更改代码。

Answer 2

窗口宽度可以从窗口对象的innerWidth获得。

var windowWidth = window.innerWidth

可用作

if (windowWidth < 800) {
  //code
}

通常需要一个用于窗口大小调整事件的事件处理程序来更新保持变量。

window.onresize(function() {
  windowWidth = window.innerWidth; // references previously declared variable
})

同时强烈推荐使用Request Animation Frame代替Scroll事件。有关详细信息，请参阅this short tutorial。

反转动画菜单并使其仅移动

2 个答案: