Question

我使用此代码将移动设备的导航设为粘性：

<div class="stickyTest" id="stickyTest2">
  <ul id="nav">
    <li class="homeicon"><a href="<?php echo $this->getUrl('')?>" class=""></a></li>
    <?php echo $_menu ?>

  </ul>

  <script type="text/javascript">
    document.observe('dom:loaded', function() {
      new MobileNavigation();

      var searchToggle = $('mobile-search-toggle'),
          searchForm = $('search_mini_form');
      if (searchToggle && searchForm) {
        searchToggle.observe('click', function() {
          searchForm.toggleClassName('shown');
        });
      }
    });
  </script>

  <script type="text/javascript">
    function ajaxsearchsubmit(form){
      var search = encodeURIComponent(form.w.value);
      document.activeElement.blur();
      window.location="http://www.test.co.uk/search/go?w="+search; 
      return false;
    }
  </script>
  <div class="clear"></div>
</div>

和css：

.stickyTest {
  background: #362011;
  position:fixed;
  z-index:1000;
  width:100%;
  top:0px;
}
#stickyTest2 {margin-top:40px;}

现在我的问题是，当用户向下滚动时，我只需要position:fixed类的.stickyTest和margin-top:40px id的#stickyTest2顶部导航不在视野范围内。所以有两个问题：

如何在滚动条件中应用这些特定样式？
有没有办法检测顶部导航何时退出视野？我知道当用户滚动超过200px但屏幕尺寸不同等时，我可以做一些粘贴导航样式的应用。我想知道是否有更灵活的方法？

Answer 1

如何在滚动中应用这些特定样式？

如果 您可以使用jQuery库，则可以使用以下代码检测滚动事件：

$(window).scroll(function(){
    // your code
});

然后，您可以使用addClass()和removeClass()来上课。

有没有办法检测顶部导航何时不在视野范围内？

您可以使用这段代码获取导航栏的高度，再次使用jQuery并使用scroll()方法在scrollTop()函数中进行测试，如下所示：

var stickyHeight = $('.stickyTest').height(); 
$(window).scroll(function(){
  // if your top navbar is out of view
  if($(window).scrollTop() > stickyHeight){
    $('.stickyTest').addClass('fixed');
  }else{
    $('.stickyTest').removeClass('fixed');
  } 
});

See a live example

来源：

scroll()：https://api.jquery.com/scroll/

addClass()：https://api.jquery.com/addclass/

removeClass()：https://api.jquery.com/removeclass/

scrollTop()：https://api.jquery.com/scrollTop/

当主导航离开视图时，应用粘性导航的样式

1 个答案: