javascript - JS/CSS : How to change z-index value after scrolling down past 1200 pixels (in height)?

Question

我有一个固定的导航栏，其中有几个 div，我希望用户在我的网站上向下滚动 1200 像素高度后显示我的 Logo div。我想通过在达到该点后立即增加 Logo div 的 css z-index 值来实现此目的。

我在想也许我必须使用 css 媒体查询 PHP 或 Jquery？不过，我目前对这些还没有太多经验。 :)

Answer 1

我建议使用 jQuery。解决方案如下所示:

// Catch scroll event
$( window ).scroll(function() {
  // If user didn't scroll 1200px set default z-index
  if ($(this).scrollTop()<1200) { 
      $("#logo" ).css( "z-index", 0);
  } else {
      // If user scrolled 1200px change logo's z-index to 9999  
      $("#logo" ).css( "z-index", 9999);
  }
});

我也相信使用 z-index控制 Logo 的可见性并不是一个好主意。我建议隐藏 Logo ，然后在滚动上显示它。为了隐藏你可以使用 style="display: none;"属性。示例:<img src="..." style="display: none;" 。您也可以使用 $("#logo" ).hide();为了那个原因。要显示 Logo ，请使用 .show() 。如果上面的代码更改 $("#logo" ).css( "z-index", 9999);至$("#logo" ).show();