当用户向下滚动时，不同的导航菜单

Different navigation menu when user scrolls down

本文关键字：导航 菜单 用户 滚动      更新时间：2023-09-26

当用户向下滚动时，我很难找到创建不同导航菜单的方法。我在找这样的东西。http://www.kamellazaarfoundation.org

我希望当用户向下滚动时，#small-menu取代#big-menu。

JSFiddle 

<div id="container">
  <div id="big-menu">
    <div id="big-logo">Big Logo</div>
    <div id="big-navigation">Navigation</div>
    <div id="big-search-bar">Search</div>
  </div>
  <!--<div id="small-menu"> ---Small Menu I want to replace the big menu with when user        scrolls down---
    <div id="small-logo">Small Logo</div>
    <div id="small-navigation">Navigation</div>
    <div id="small-search-bar">Search</div>
  </div>-->
<div id="content"></div>
</div>
#container {
  width: 600px;
  border: 1px solid green;
  padding: 10px;
}
#big-menu {
  height: 100px;
  border: 1px solid red;
}
#big-logo {
  width: 100px;
  height: 80px;
  border: 1px solid blue;
  margin-top: 10px;
  float: left;
}
#big-navigation {
  width: 300px;
  height: 20px;
  border: 1px solid orange;
  float: left;
  margin: 70px 0 0 10px;
}
#big-search-bar {
  width: 150px;
  height: 20px;
  border: 1px solid pink;
  float: right;
  margin: 70px 10px 0 0;
}
#small-menu {
  height: 60px;
  border: 1px solid teal;
}
#small-logo {
  height: 60px;
  width: 60px;
  float: left;
  border: 1px solid red;
}
#small-navigation {
  width: 300px;
  height: 20px;
  border: 1px solid black;
  margin: 30px 0 0 10px;
  float: left;
}
#small-search-bar {
  width: 150px;
  height: 20px;
  border: 1px solid aqua;
  float: right;
  margin: 30px 10px 0 0;
}
#content {
  height: 1200px;
  margin-top: 10px;
  border: 1px solid purple;
}
$(function() {
// Stick the #nav to the top of the window
var nav = $('#big-menu');
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
    var scrollTop = $w.scrollTop();
    var shouldBeFixed = scrollTop > navHomeY;
    if (shouldBeFixed && !isFixed) {
        nav.css({
            position: 'fixed',
            top: 0,
            left: nav.offset().left,
            width: nav.width()
        });
        isFixed = true;
    }
    else if (!shouldBeFixed && isFixed)
    {
        nav.css({
            position: 'static'
        });
        isFixed = false;
    }
});
});

这将是你的jQuery代码:

var $document = $(document),
$element = $('.fixed-menu'),
className = 'hasScrolled';
$document.scroll(function() {
  if ($document.scrollTop() >= 100) {
    $element.addClass(className);
  } else {
    $element.removeClass(className);
  }
});
这里我设置了一个jsFiddle作为例子

与其做大量的DOM替换，不如考虑使用classNames和CSS代替，f.ex:

<div id="container">
  <div id="menu">
    <div id="logo">Big Logo</div>
    <div id="navigation">Navigation</div>
    <div id="earch-bar">Search</div>
  </div>
  <div id="content"></div>
</div>

JS，比如:

$(window).scroll(function() {
  var isSmall = /* true/false; detect scrolling distance */;
  $('#menu').toggleClass('small', isSmall);
})

当检测到一定的滚动距离时，将small类切换到#menu容器。CSS可以像这样:

#logo{height:100px} /* default (big) */
#menu.small #logo{height:60px} /* small */

这些只是例子，你需要找出你自己的设计实现:)

使用CSS还可以让您在以后制作精美的动画。

相关文章：